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

问题

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)

回答1:

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.

来源：https://stackoverflow.com/questions/16062257/d3-js-donut-chart-arc-centroidd-is-not-influenced-by-d-innerradius-and-d-ou