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)
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.