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

You can also just have a single text box, and move it to the correct location when you mouse-over the points. — naught101
– naught101, Commented Aug 14, 2015 at 0:57

Scott Cameron · Accepted Answer · 2013-08-07 05:30:21Z

33

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

answered Aug 7, 2013 at 5:30

Scott Cameron

5,3333 gold badges32 silver badges34 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

user1855009 Over a year ago

The text element lived under the node itself, so I was able to get it working by using the code you provided for mouseover and mouseout of the node itself.

Collectives™ on Stack Overflow

Show d3 node text only on hover

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related