Question

我正在尝试仅在鼠标悬停时显示节点文本。当鼠标悬停在节点上时，我对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);

Answer 1

如果您使用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'});
})

仅在悬停时显示d3节点文本

1 个答案: