How to move labels to outside pie chart in D3

Question

I'm trying to recreate this in D3

I've got my D3 code here: http://codepen.io/jpezninjo/pen/XpoVwQ

I can't figure out how to move labels to outside my pie chart. I know it's this line

.attr("transform", function(d) {
      return "translate(" + labelArc.centroid(d) + ")"; })

but I'm having a hard time looking for information about centroid. I'm guessing it's taking the center between labelArc's inner and outer radius, but I tried messing with that and got no difference.

Answer 1

Try this

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

You can play with 1.2 which allows you to position the labels outside the pie chart.