D3 Examples - The circle-text plugin.

xxxxxxxxxx
 
<!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>
​
    