d3.js - D3 v4 和弦图中的鼠标悬停事件

Question

我正在尝试根据 Mike Bostock's v4 example 制作 D3 和弦图和一个 v3 example with mouseover events .

在上面的 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);
  };
}

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

这是我的 fork fiddle https://jsfiddle.net/kLe38tff/