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

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'});
})