我试图仅在鼠标悬停时显示节点文本。当我将鼠标悬停在节点上时，svg 圆的不透明度发生变化，但仅显示第一个节点的文本。我发现这是因为我如何使用 select 元素，但我不知道如何为我悬停的节点提取正确的文本。这是我目前所拥有的。
node.append("svg:circle")
.attr("r", function(d) { return radius_scale(parseInt(d.size)); })
.attr("fill", function(d) { return d.fill; })
.attr("stroke", function(d) { return d.stroke; })
.on('mouseover', function(d){
d3.select(this).style({opacity:'0.8'})
d3.select("text").style({opacity:'1.0'});
})
.on('mouseout', function(d){
d3.select(this).style({opacity:'0.0',})
d3.select("text").style({opacity:'0.0'});
})
.call(force.drag);
如果你使用d3.select你正在整个 DOM 中搜索<text>元素并选择第一个。要选择特定的文本节点，您需要一个更具体的选择器（例如#textnode1）或者您需要使用子选择来约束特定父节点下的选择。例如，如果<text>元素直接位于示例中的节点下，您可以使用：
.on('mouseover', function(d){
var nodeSelection = d3.select(this).style({opacity:'0.8'});
nodeSelection.select("text").style({opacity:'1.0'});
})
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
