CODEWITHSUNDEEP
d3.js
Hasna Boumiza
Hasna Boumiza

Reputation: 81

Coordinates of each center's arc in a pie chart

In order to draw a baton that its starting point takes coordinates of arc's center in a Pie Chart d3 js, How can determinate coordinates of each arcs's center ? I tried this code but only the first baton was in the right position.

        var lines = arcs.selectAll("line")
                      .data(data)
                       .enter()
                      .append("line")
                      .attr("x1", function(d, i) { return r*Math.cos( parseFloat(d)/r);})
                      .attr("y1", function(d) { return r*Math.sin( parseFloat(d)/r) ;}) 
                      .attr("x2", function(d) { return r*Math.cos( parseFloat(d)/r) + parseFloat(d) ;}) 
                      .attr("y2", function(d) { return r*Math.sin( parseFloat(d)/r) + parseFloat(d) ;}) 
                     .attr("class", "line")

                     .style("stroke", function (d) {return color(d.data) ; })
                     .style("stroke-width", "3px");

Please i need your help.

Upvotes: 1

Views: 2770

Answers (1)

Lars Kotthoff
Lars Kotthoff

Reputation: 109232

As pointed out in the comments, the arc.centroid() function provides this functionality:

var pie = d3.layout.pie().value(function(d){ return d.value; });
var arc = d3.svg.arc().innerRadius(0).outerRadius(r);
var centers = pie(data).map(arc.centroid);

Or with a D3 selection:

var centers = [];
arcs.each(function(d) {
  centers.push(arc.centroid(d));
});

Complete demo here.

Upvotes: 4

Related Questions