CODEWITHSUNDEEP
d3.js
Valram
Valram

Reputation: 125

D3 trouble while appending text on mouseover

I would like to show a text on mouseover.

var circle = elemEnter.append("circle")
          .attr("r", function(d){return d.r*2} )
          .attr("dx", function(d){return d.x} )
          .attr("stroke","gray")
          .attr("fill", "#91c6ed")
          .on("mouseover", function()
                          {d3.select(this).style("stroke", "#ff7f0e");
               d3.select(this).style("stroke-width", "2px");
               elemEnter.append("text")
                        .text(function(d){return d.name})})
          .on("mouseout", function()
                          {d3.select(this).style("stroke", "gray");
                           d3.select(this).style("stroke-width", "1px");});

This piece of code works but show all the names on all the circles and when I try to replace

elemEnter.append("text").text(function(d){return d.name})

by

d3.select(this).append("text").text(d.name)

nothing happens.

I think it is possible to do it but I don't know what I'm doing wrong.

Upvotes: 0

Views: 935

Answers (1)

Elijah
Elijah

Reputation: 4639

You can't append text to a circle. You need to start with a g and append the circle to the g and append the text to the g. Keep in mind that the g will not have cx/cy attributes and so you'll need to put that data into the following syntax:

.attr("transform", function (d) {return "translate("+d.X+","+d.Y")"})

If you're binding data, bind it to the g and then just naked append the circle and text to the g.

Upvotes: 2

Related Questions