我正在尝试为Mike Bostock创建的Chord Diagram添加一个小函数。当我将鼠标悬停在某个弧线上时，比如A组，我想要一段文字放在和弦图的右边，以更新其文本，以解释一些特定于A组的见解。当用户移动他的时候/她的鼠标远离圆弧/和弦（所以所有的和弦再次变得可见），我希望文本回到之前所说的内容（在我的例子中是对如何理解和弦图的简短解释）
但是，我无法使用鼠标事件功能更改文本甚至消失。
我已尝试将fade功能最后复制到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
{{1}}
但是，文本始终显示为“标准文本”。当我将鼠标悬停在和弦上时没有任何反应，文本似乎永远不会变成“更新的文本”。任何人都可以向我解释为什么不和/或帮助我如何实现我想做的事情？ （我希望刷新后文本为'空'，因为我还没有调用鼠标事件，但它在刷新后就说“标准文本”）
我知道上面的例子最终还不是我想要的，但也许当我将上述内容付诸实践时，我可以使用和弦索引来显示特定的更新文本
答案 0 :(得分：0)
这里的关键是fade函数本身返回函数。也就是说，有两种执行方案。首先，在分配事件处理程序（恰好一次）时执行函数本身的代码。其次，实际更改事物的代码在事件被触发时执行（并且仅在那时）。
您已在第一个执行上下文中添加了新代码。这意味着您的代码在分配处理程序函数时只执行一次，而实际触发事件时不。要实现您想要的效果，您需要将此代码放在从淡入淡出函数返回的函数中，即在return function(d, i)行下面。