CODEWITHSUNDEEP
d3.jsmouseovernodes
user1855009
user1855009

Reputation: 971

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

Upvotes: 19

Views: 43770

Answers (1)

Scott Cameron
Scott Cameron

Reputation: 5323

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

Upvotes: 33

Related Questions