Show d3 node text only on hover

问题:

I'm trying to only show the node text on mouseover. When I mouseover the node, I have the opacity for the svg circle changing, but only the text for the first node showing up. I've figured out that this is because of how I'm using the select element, but I can't figure out how to pull the correct text for the node that I'm hovering on. Here's what I currently have.

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

回答1:

If you use d3.select you're searching the entire DOM for <text> elements and selecting the first one. To select specific text nodes you either need a more specific selector (e.g. #textnode1) or you need to use a subselection to constrain the selection under a particular parent node. For example, if the <text> element lived directly under the node in your example you could use:

.on('mouseover', function(d){
    var nodeSelection = d3.select(this).style({opacity:'0.8'});
    nodeSelection.select("text").style({opacity:'1.0'});
})