1

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

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

我尝试将fade函数最后复制到： http: //bl.ocks.org/mbostock/4062006到 a中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

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

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

4

1 回答 1

0

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

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

于 2013-09-13T12:40:39.773 回答