Question

我正在创建类似this的加权树形图。我希望有一种效果，当鼠标悬停在圆圈上时，此圆圈的链接会变粗或变粗。当鼠标退出时，链接回到原始设置。这可能吗？谁能给我一些线索？非常感谢！

Answer 1

由于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，这样您就可以确保节点/链接对的顺序正确，以便它可以工作。

Answer 2

你可以在你的CSS上对SVG元素进行悬停效果

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

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

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

2 个答案: