D3 v4 和弦图中的鼠标悬停事件

Question

我正在尝试按照Mike Bostock 的 v4 示例和带有鼠标悬停事件的v3 示例制作 D3 和弦图。

在上面的 v3 示例中，有一个淡入淡出功能可以突出显示鼠标悬停组的特定功能区：

function fade(opacity) {
  return function(d, i) {
    svg.selectAll("ribbons")
    .filter(function(d) {
       return d.source.index != i && d.target.index != i;
    })
    .transition()
    .style("opacity", opacity);
  };
}

尽管在我的一生中，我无法让它在我的 v4 示例中工作，尽管我试图将它放在类似的位置：

//Draw the ribbons that go from group to group
g.append("g")
    .attr("class", "ribbons")
    .selectAll("path")
    .data(function(chords) { return chords; })
    .enter().append("path")
    .attr("d", ribbon)
    .style("fill", function(d) { return color(d.target.index); })
    .style("stroke", function(d) { return d3.rgb(color(d.target.index)).darker(); })
    .on("mouseover", fade(.1))         /* Where attempt at mouseover is made */
    .on("mouseout", fade(1));
    .append("title").
    text(function(d){return chordTip(d);})

这是我尝试的 jsfiddle（带有有效的工具提示，但无效的淡入淡出鼠标悬停）：https ://jsfiddle.net/wcat76y1/3/

我相信我的错误与我如何隔离变量有关，但我不确定我到底哪里出错了。

Answer 1

我发现上一个答案的第 2 部分对我不起作用，但确实如此。

function fade(opacity) {
  return function(d, i) {
    d3.selectAll("g.ribbons path")
        .filter(function(d) {
          return d.source.index != i && d.target.index!= i;
        })
      .transition()
        .style("opacity", opacity);
  };
}

您只使用丝带的线条似乎没有选择正确的元素。我同意你所做的第一次更正，但没有使用文本元素。

这是我的分叉小提琴https://jsfiddle.net/kLe38tff/