Show d3 node text only on hover

Question

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.

Answer 1

If you use d3.select you're searching the entire DOM for 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 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'});
})