CODEWITHSUNDEEP
javascriptd3.jssvg
masotann
masotann

Reputation: 911

Text element not showing on SVG

I'm trying to make a bubblechart using D3 and put a text inside the bubble. I've checked through a lot of examples and understand that the HTML DOM should look like a group tag surrounding the circle and text tag which I believe I have in my jsfiddle example: https://jsfiddle.net/q4nszx34/

I attempted to make the text appear in the same area as the bubble via:

circles.append("text")  
       .attr("dx", -10)
       .attr("dy", ".35em")
       .text(function (d) {
          return d.key;
        })
        .style("stroke", "gray");

However, the text element's location is not at the same location as my bubble, and I'm not sure how to get the bubble's location to set the text's location.

Thank you in advance.

Upvotes: 1

Views: 1303

Answers (1)

Gerardo Furtado
Gerardo Furtado

Reputation: 102174

In the ticked function, translate your group elements:

circles.attr("transform", function(d){
  return "translate(" + d.x + "," + d.y + ")";
})

That way, both the <circle> and the <text> elements will move together.

Here is your updated fiddle: https://jsfiddle.net/k45oaztv/

Upvotes: 1

Related Questions