CODEWITHSUNDEEP
d3.jspie-chartdonut-chart
user1231712
user1231712

Reputation: 31

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)

Upvotes: 3

Views: 9257

Answers (1)

Lars Kotthoff
Lars Kotthoff

Reputation: 109232

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.

Upvotes: 10

Related Questions