如何在D3 Sankey图中突出显示整个路径？

Question

我正在构建一个sankey图，就像这个https://bost.ocks.org/mike/sankey/一样，但是当用户将鼠标悬停在节点上时，我需要能够突出显示整个路径。

D3中有没有内置的东西？如果没有，我怎么能在Javascript中做到这一点？

Answer 1

在发布的示例中，悬停效果是通过:hover伪类的简单CSS规则完成的。

当突出显示整个路径时，这不再那么简单了。我看到两个选项。

根据需要将CSS类应用于路径元素

1. 为每个路径元素注册一个mouseenter和mouseleave处理程序
2. 在mouseenter处理程序中，读出通过d3
绑定到它的数据元素
3. 计算读出数据元素的整个路径
4. 更改整个Sankey的数据数组，以包含应突出显示哪些边缘的数据
5. 使用Sankey DOM元素加入已更改的数据数组，并使用更新选择为绑定元素标记为突出显示的元素设置hightlight类
6. 不要忘记处理mouseleave

为每个路径元素设置路径的各个类，该元素是

的一部分

这个选项更加非常规。这个想法如下：

1. 通过enter选择创建Sankey的DOM元素时，在元素上为每个路径设置单独的类
2. 在mouseenter处理程序中，将当前选定的路径设置为class - 如果是路径号13，则说hightlight-path-13 - 在边元素的父DOM元素上

3. 在CSS中有与此类似的选择器

   .highlight-path-13 .path-13 {   中风不透明度：0.5; }