Donut chart with tick mark lines (d3)

Question

I have three donut charts

var data = [ { institution: [53245, 28479, 19697, 24037, 40245] }, { institution: [45, 9, 127, 37, 11] }, { institution: [3245, 88479, 45697, 1037, 77245] } ]

var width = 100,
    height = 100,
    radius = Math.min(width, height) / 2;

var color = d3.scale.category20();

for (index = 0; index < data.length; ++index) {

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

    var arc = d3.svg.arc()
        .innerRadius(radius - 30)
        .outerRadius(radius - 5);

    var svg = d3.select("body").append("svg:svg")
        .attr("width", width)
        .attr("height", height)
        .append("g")
        .attr("transform", "translate(" + width / 2 + "," + height / 2 + ")");

    var path = svg.selectAll("path")
    .data(pie(data[index].institution))
  .enter().append("path")
    .attr("fill", function(d, i) { return color(i); })
    .attr("d", arc);
}

For each segment in each chart I need a short line and a label with the value, for example here enter image description here

Is there any simple solution for this?

As in [here](http://blog.stephenboak.com/2011/08/07/easy-as-a-pie.html)? — Lars Kotthoff, May 08 '13 at 13:37
yes...i found the part with the tick lines here (http://blog.stephenboak.com/js/pie-random.js), but doesn't work for me :( — cupakob, May 08 '13 at 13:52
I have ticks and labels, but the labels are still not right positioned — cupakob, May 10 '13 at 12:47
You'll need to show us the code you are using to do this before we can comment. — Lars Kotthoff, May 10 '13 at 12:48
All you need to do is copy the code that sets the `text-anchor` from the example you've linked to... — Lars Kotthoff, May 10 '13 at 13:00
I dont think so....the labels from the example are not centered to the ticks. — cupakob, May 10 '13 at 13:23
Well then you just need to change the text alignment. Is [this](http://jsfiddle.net/TEZdK/) what you're looking for? — Lars Kotthoff, May 10 '13 at 13:27
let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/29737/discussion-between-cupakob-and-lars-kotthoff) — cupakob, May 10 '13 at 13:29

score 2 · Accepted Answer · edited Feb 10 '15 at 11:57

Here my solution:

var data = [
    {
        institution: [53245, 28479, 19697, 24037, 40245]
    },
    {
        institution: [45, 9, 127, 37, 11]
    },
    {
        institution: [3245, 88479, 45697, 1037, 77245]
    }
];

var width = 200;
var height = 200;
var radius = Math.min(width, height) / 4;
var r = radius;
var textOffset=5;

var colours = ['#ffc400','#e53517','#7ab51d','#009fda','#c2c2c2'];

for (index = 0; index < data.length; ++index) {
    var pie = d3.layout.pie().sort(null);

    var arc = d3.svg.arc().innerRadius(radius - 30).outerRadius(radius - 5);

    var svg = d3.select("body").append("svg:svg")
    .attr("width", width)
    .attr("height", height)
    .append("g")
    .attr("transform", "translate(" + width / 2 + "," + height / 2 + ")");

    var piedata=pie(data[index].institution);

    var ticks = svg.selectAll("line").data(piedata).enter().append("line");
    ticks.attr("x1", 0)
    .attr("x2", 0)
    .attr("y1", -radius+4)
    .attr("y2", -radius-2)
    .attr("stroke", "gray")
    .attr("transform", function(d) {
      return "rotate(" + (d.startAngle+d.endAngle)/2 * (180/Math.PI) + ")";
    });

    var labels = svg.selectAll("text").data(piedata).enter().append("text");
    labels.attr("class", "value")
    .attr("transform", function(d) {
       var dist=radius+15;
       var winkel=(d.startAngle+d.endAngle)/2;
       var x=dist*Math.sin(winkel);
       var y=-dist*Math.cos(winkel);
       return "translate(" + x + "," + y + ")";
    })
    .attr("dy", "0.35em")
    .attr("text-anchor", "middle")
    .text(function(d){
      return d.value;
    });

    var path = svg.selectAll("path")
        .data(piedata)
          .enter().append("path")
        .attr("fill", function(d, i) { return colours[i]; })
        .attr("d", arc);
}

Donut chart with tick mark lines (d3)

1 Answers1