javascript - 在 D3.JS 桑基图中突出显示特定链接

Question

在下面的示例中，我想在初始加载时永久突出显示特定链接(每个节点之间的连接):

http://bl.ocks.org/d3noob/c2637e28b79fb3bfea13

如您所见，它会在鼠标悬停时突出显示一个链接。

这是用css实现的:

.link:hover {
  stroke-opacity: .5;
}

如何在不使用鼠标悬停的情况下(即首次添加 SVG 元素时)为特定链接(例如前两个节点之间的链接)获得相同的结果。

Answer 1

这就是您所需要的:首先，相应地过滤 link 数组。

var firstLink = link.filter(d => d.source.node === 0 && d.target.node === 4);

在这种情况下，我们得到第一个链接(在顶部)，它从节点 0(源)到节点 4(目标)。

然后，应用不透明度:

firstLink.attr("opacity", .5);

这是一个显示它的 fiddle :https://jsfiddle.net/7mm1ko4f/