Question

我正在尝试在Mike Bostock's v4 example和v3 example with mouseover events之后制作一个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/

Answer 2

我设法搞清楚了。看起来有几个问题结合起来混淆了我尝试过的解决方案。虽然我可以将其标记为已解决，但我的解决方案仍然有一些我不理解的元素。

我是将鼠标悬停事件添加到错误的部分（DOM元素？）。它应该已添加到组元素的操作而不是功能区元素。因此，它本应该在这里：

//Draw the radial arcs for each group
group.append("path")
    .style("fill", function(d) { return color(d.index); })
    .style("stroke", function(d) { return d3.rgb(color(d.index)).darker();     })
    .attr("d", arc)
    .on("mouseover", fade(.1))
    .on("mouseout", fade(1))

在淡入淡出功能中使用svg.selectAll("ribbons")并没有选择我想要的元素（我还不确定为什么不...）。仅使用变量ribbons替换该命令允许选择成功完成：

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

在变量<text>创建过程中将ribbons元素添加到变量导致不透明度在文本元素上修改而不是功能区元素本身。将其分成单独的代码行修复了最终问题。

更新的JSFiddle显示了完整的工作示例：https://jsfiddle.net/wcat76y1/5/

D3 v4和弦图

2 个答案: