鼠标悬停在 d3.js 上时如何使链接变为粗体答案

【问题标题】：How to make the link bold when mouse over d3.js鼠标悬停在 d3.js 上时如何使链接变为粗体
【发布时间】：2017-02-28 21:17:18
【问题描述】：

我正在创建一个类似于this 的加权树形图。我想要一个效果，当鼠标悬停在一个圆圈上时，这个圆圈的链接变粗或加粗。当鼠标移开时，链接又回到原来的设置。这可能吗？谁能给我一些线索？非常感谢！

【问题讨论】：

标签： javascript css d3.js svg

【解决方案1】：

您可以在 CSS 中对 SVG 元素进行悬停效果

circle:hover { stroke-width: 4px; }

您需要找出最佳方式来定位元素以满足您的特定需求。

【讨论】：

内联样式元素示例：d3.select("#theSvgParentElement").append("style").text("circle:hover { stroke-width: 3px; }");.

【解决方案2】：

由于 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 代码，以便新的动态创建的元素将具有相同的悬停行为。