The circle-text plugin.

A demo for the circle-text plugin, which can place text aligned along the bottom of circles.

<!DOCTYPE html>
<html>
  <head>
    <title>Circle text</title>
    <meta charset="utf-8">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script>
    <script src="circle-text.js"></script>
    <style>
      #container {
        margin: auto;
        width: 800px;
      }

svg {
        width: 100%;
        min-height: 600px;
      }

.arc-path {
        visibility: hidden;
      }

circle {
        stroke: none;
      }
    </style>
  </head>
  <body>
    <div id="container"></div>
    <script>
      var circles = [
        {
          cx: 200,
          cy: 300,
          r: 20,
          text: 'A'
        },
        {
          cx: 400,
          cy: 300,
          r: 50,
          text: 'plugin'
        },
        {
          cx: 600,
          cy: 300,
          r: 100,
          text: 'for text inside circles!'
        }
      ];

var svg = d3.select('#container')
                  .append('svg'),
          colors = d3.scale.category10();

var circleText = d3.circleText()
                        .radius(function (d) { return d.r - 5; })
                        .value(function (d) { return d.text; })
                        .precision(0.1);

var gs = svg.selectAll('g')
                  .data(circles)
                  .enter()
                  .append('g')
                  .attr('transform', function (d) {
                    return 'translate(' + d.cx + ',' + d.cy + ')';
                  });

gs.append('circle')
        .attr('cx', 0).attr('cy', 0)
        .attr('r', function (d) { return d.r; })
        .attr('fill', function (d, i) { return colors(i); })
        .attr('fill-opacity', '0.3');

var texts = gs.call(circleText);

texts
        .attr('stroke', 'none')
        .attr('fill', function (d, i) { return colors(i); });

</script>
  </body>
</html>

https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js