Circular Label - using arcs

by Nivaldo

HTML

<script src="http://d3js.org/d3.v3.js"></script>

CSS

text {

    font-family: Verdana;

}

JavaScript

var dataset = {
    "2":[{"degree1":0,"degree2":8,"label":"April 19, 2014"}]
    },
    width   = 200,
    height  = 200,
    radius  = 100;

// Helper methods
var innerRadius = function(d, i, j) {
    return 1 + radius * j;
};

var outerRadius = function(d, i, j) {
    return radius * (j + 1);
};

var startAngle = function(d, i, j) {
    return d.data.degree1;
};

var endAngle = function(d, i, j) {
    return d.data.degree2;
};

var pie = d3.layout.pie()
    .sort(null);

var arc = d3.svg.arc()
    .innerRadius(innerRadius)
    .outerRadius(outerRadius)
    .startAngle(startAngle)
    .endAngle(endAngle);

function centerRadius(d, i, j) {
    return innerRadius(d, i, j) / 1.55 + outerRadius(d, i, j) / 1.55;
}

var labelArc = d3.svg.arc()
    .innerRadius(centerRadius)
    .outerRadius(centerRadius)
    .startAngle(startAngle)
    .endAngle(endAngle);

var svg = d3.select('body').append('svg')
    .attr('width', width)
    .attr('height', height)
    .append('g')
    .attr('transform', 'translate(' + (width >> 1) + ',' + (height >> 1) + ')');

var level = svg.selectAll('g')
    .data(function(d) {
        return d3.values(dataset);
    })
    .enter()
    .append('g');

var entry = level.selectAll('g')
    .data(function(d, i) {
        return pie(d);
    })
    .enter()
    .append('g');

entry.append('path')
    .attr('fill', '#aaa')
    .attr('d', arc)
    .attr('id', function(d, i, j) {
        return 'arc' + i + '-' + j;
    });

entry.append('path')
  .attr('fill', 'none')
  .attr('stroke', 'none')
  .attr('d', labelArc)
  .attr('id', function (d, i, j) {
      return 'arc-label' + i + '-' + j;
  });

var label = entry.append('text')
    .style('font-size', '12px')
    .attr('text-anchor', 'middle');

label.append('textPath')
    .attr('startOffset', '25%')
    .attr('xlink:href', function(d, i, j) {
        return '#arc-label' + i + '-' + j;
    })
    .style('fill', '#000')
    .text(function(d) {
        return d.data.label;
    });