Adding svg text inside svg circle in d3js

Question

I am trying to add text into a circle made in SVG with d3.js

The text is not appearing inside the circle. When I inspect the element I can see

Answer 1

You cannot place the <text> node inside the <circle></circle> node. You need to stack them one after the other. You can add both <circle> and <text> to a <g> element. Try this snippet

function CreateNode(nodeId,label,className,nodeType)
{   
  var node = d3.select("svg").append('g');

  node.append("circle")
   .attr("cx", CalculateX(nodeType))
   .attr("cy", CalculateY(nodeType))
   .attr("r",40)
   .style("fill","none")
   .style("stroke","#ccc")
   .attr("nodeId",nodeId)
   .attr("class",className);

   node.append("text")
    .attr("x", CalculateX(nodeType))             
    .attr("y", CalculateY(nodeType))
    .attr("text-anchor", "middle")  
    .style("font-size", "14px")
    .attr('fill','#cccccc')
    .text(label);

    return node;

}