Insert text inside Circle in D3 chart

Question

I want to insert some text inside my Circle which is plot in bubble chart using D3.js.
I am able to draw circle in svg as per the data provided to it, but facing a problem w

Answer 1

A better way of doing this is to use svg groups, then you can position both the circles and the text together:

var join = vis.selectAll(".points").data(sampleData);

var groups = join
  .enter()
  .append("g")
  .attr("transform", function(d) { return "translate(" + [d.x, d.y] + ")"; });
  .attr("cx", function(d) { return xRange (d.x); })

groups.append("circle")
  .attr("r", function(d) { return Math.log(d.x) * 30; })
  .attr("stroke","black")
  .style("fill", "yellow");

groups.append("text")
      .data(sampleData)
      .text( function (d) { return "( " + d.cx + ", " + d.cy +" )"; })
      .attr("font-family", "sans-serif")
      .attr("font-size", "20px")
      .attr("fill", "red");