Javascript 当鼠标悬停在d3.js上时，如何使链接加粗

我正在创建一个类似的加权树形图。

---

我想有一个效果，当鼠标悬停在一个圆上时，这个圆的链接会变粗或变粗。当鼠标离开时，链接回到原始设置。这可能吗？有人能给我一些线索吗？非常感谢

您可以在SVG元素上的css中执行悬停效果

圆圈：悬停{
笔画宽度：4px；
}

---

您需要找出针对元素的最佳方法，以满足您的特定需求。

由于在DOM中放置链接和节点无法使用任何CSS选择器（因为链接和节点不是同级或父/子级），因此您必须使用d3和唯一的元素ID，例如：

d3.selectAll('g.node').attr("id", function(d,i){ return "node"+i});
d3.selectAll('path.link').attr("id", function(d,i){ return "link"+i});

d3.selectAll('g.node').each(function(d, i) {
   d3.select('#node'+i).on("mouseover", function() { 
       d3.select('#link'+(i-1)).attr('style', 'stroke-width: 4px');
   }).on("mouseout", function() {
       d3.select('#link'+(i-1)).attr('style', 'stroke-width: 2px');
   });
});

这将在每个节点和链接上设置唯一的id，然后为每个节点设置

onmouseover

，以调用函数更新相应链接的样式（以及

onmouseout

以撤消样式更改）

---

这确实依赖于这样的假设，即节点和链接以相同的顺序构造，并且有一个根节点没有相应的链接。理想情况下，您应该在构建过程中设置节点和链接元素上的ID，以便确保节点/链接对的顺序正确，以便正常工作。

此外，由于您的示例显示了基于用户单击动态构建的节点和链接，您肯定希望在构造期间调用mouseover/mouseout代码，以便动态创建的新元素具有相同的悬停行为。