Label outside arc (Pie chart) d3.js

Question

I\'m new to d3.js and I\"m trying to make a Pie-chart with it. I have only one problem: I can\'t get my labels outside my arcs... The labels are positioned with arc.centroid

Answer 1

Thanks!

I found a different way to solve this problem, but yours seems better :-)

I created a second arc with a bigger radius and used it to position my labels.

///// Arc Labels ///// 
// Calculate position 
var pos = d3.svg.arc().innerRadius(r + 20).outerRadius(r + 20); 

// Place Labels 
arcs.append("svg:text") 
       .attr("transform", function(d) { return "translate(" + 
    pos.centroid(d) + ")"; }) 
       .attr("dy", 5) 
       .attr("text-anchor", "middle") 
       .attr("fill", function(d, i) { return colorL(i); }) //Colorarray Labels
       .attr("display", function(d) { return d.value >= 2 ? null : "none"; })  
       .text(function(d, i) { return d.value.toFixed(0) + "%"});