D3.js donut chart... arc.centroid(d) is not influenced by d.innerRadius and d.outerRadius

user1231712 picture user1231712 · Apr 17, 2013 · Viewed 8.4k times · Source

I'm creating a donut (or Piechart) and I want to place the labels just outside the area. I've created a fiddle http://jsfiddle.net/VeeTee/mA3V7/ for it.

arcs.append("svg:text")
    .attr("transform", function(d) {
        //this is where I want to make a translation to the outside border
        d.innerRadius = radius;
        d.outerRadius = height/2;
        return "translate(" + arc.centroid(d) +")";
    })
    .attr("dy", ".35em")
    .attr("text-anchor", "middle")
    .text(function(d, i) { return d.value.toFixed(2); });

arc.centroid(d) -> is always giving the same result (and therefore the same translation)

Answer

Lars Kotthoff picture Lars Kotthoff · Apr 17, 2013

Not sure what you mean by that it's always giving you the same result, but you can place the labels just outside the chart by multiplying the coordinates of the centroid by 1.5. The code is something like this.

.attr("transform", function(d) {
        var c = arc.centroid(d);
        return "translate(" + c[0]*1.5 +"," + c[1]*1.5 + ")";
    })

Updated jsfiddle here.