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