D3.js, Why my text doesn't appear

Question

I'm new here, so please be soft with me. I try to put text in a circle:

var center = svg.append("circle")
  .attr("r", radius / 3)
  .on("click", zoomOut);

  center.append("text")
  .attr("dy", ".3em")
  .style("text-anchor", "middle")
  .text("My text");

I know a geometric shape can't containt directly a text, so I create a with circle.append("text"). However, when I see the result, there is no text in my circle, but in the code my text is here : http://www.noelshack.com/2014-24-1402322012-sans-titre.png

Someone can help me ? Thanks.

Answer 1

As explained in this question: d3 add text to circle, the solution is to insert the text out of the circle. Then, you can always have a container for both the circle and the text element:

Your code would then be something like:

var center = svg.append("circle")
  .attr("r", radius / 3)
  .on("click", zoomOut);

svg.append("text")
  .attr("dy", ".3em") // change dx and dy in order to center in the circle.
  .style("text-anchor", "middle")
  .text("My text");

Answer 2

The above answer is right. One principle to keep in mind is that, the image/circle and text should be on the same level but not nested.