D3.js 和弦图 - 将鼠标悬停在弧上时显示/消失文本

Question

我正在尝试向 Mike Bostock 创建的 Chord Diagram 添加一个小函数。当我将鼠标悬停在某个弧线上时，比如说 A 组，我想要一段放在和弦图右侧的文本来更新其文本，以解释 A 组特有的一些见解。当用户移动他的/她的鼠标远离圆弧/和弦（所以所有和弦都再次可见），我希望文本回到之前所说的内容（在我的情况下，这是对如何理解和弦图的简短解释）

但是，我无法使用鼠标事件函数来更改甚至消失文本。

我尝试将 fade 末尾的 http://bl.ocks.org/mbostock/4062006 函数复制到 fadeOver 和 fadeOut 并将事件函数调整为

.on("mouseover", fadeOver(.1))
.on("mouseout", fadeOut(1));

在fadeOver 函数中，我尝试创建一段新文本，以便在您将鼠标悬停在弧上并且未选择的和弦消失时显示。原函数fade只加了一行

function fadeOver(opacity) {

  d3.select("#SideText").html("Updated piece of text");

  return function(d, i) {
    svg.selectAll("path.chord")
        .filter(function(d) { return d.source.index != i && d.target.index != i; })
        .transition()
        .style("stroke-opacity", opacity)
        .style("fill-opacity", opacity);    
  };
}//fadeOver

我在fadeOut添加了一段类似的代码

function fadeOut(opacity) {

  d3.select("#SideText").html("Standard text");  

  return function(d, i) {
    svg.selectAll("path.chord")
        .filter(function(d) { return d.source.index != i && d.target.index != i; })
        .transition()
        .style("stroke-opacity", opacity)
        .style("fill-opacity", opacity);
  };
}//fadeOut

但是，文本始终显示为“标准文本”。当我将鼠标悬停在和弦上时没有任何反应，文本似乎永远不会变成“更新的一段文本”。任何人都可以向我解释为什么不和/或帮助我如何实现我想要做的事情吗？ （我希望刷新后文本为“空”，因为我还没有调用鼠标事件，但刷新后它显示“标准文本”）

我知道上面的例子最终还不是我想要的，但也许当我得到上面的工作时，我可以使用和弦索引来显示一段特定的更新文本

Answer 1

这里的关键是淡入淡出函数本身返回函数。即有两种执行场景。首先，函数本身的代码在分配事件处理程序时执行（恰好一次）。其次，真正改变事物的代码在事件被触发时执行（并且只有在那个时候）。

您已在第一个执行上下文中添加了新代码。这意味着您的代码在分配处理函数时只执行一次，而不是在实际触发事件时执行一次。要实现您想要的，您需要将此代码放在从淡入淡出函数返回的函数中，即在return function(d, i) 行下方。