How to get the coordinates of the slices along the edge of the pie chart?

Question

I am creating a piechart with D3 using d3.layout.pie() . It looks like this one, without black dots (I put them manually in Photoshop to illustrate my problem). I wonder how I can calculate the coordinates of these points, which are in the middle of the surface, to place some kind of hints there. I am not asking for a final decision, but more about the principle of how to do this. Thanks.

Answer 1

You can use the following equations to calculate a point around the circumference of a circle:

 x = cx + r * cos(a) y = cy + r * sin(a) 

Where (cx, cy) is the center of the circle, r is the radius, and a is the angle.

For this to work for you, you will need a way to calculate the angle based on the pieces of cake on your chart - see below.

---

According to the d3 documentation for the pie layout, the pie function returns a list of arcs, so you can process this data to calculate each of its points:

pie (values ​​[, index])

Computes the pie function for the specified array of values. An optional index can be specified, which is passed as a function of the beginning and end of the corner. The return value is an array of arc descriptors.

• value - the data value returned by the value attribute.
• startAngle - the starting angle of the arc in radians.
• endAngle - the end angle of the arc in radians.
• is the source date for this arc.

Presumably you can just take half the distance between endAngle and startAngle for each arc and put your point there.

---

For what it's worth, here is the code from pie.js , which is used to calculate each arc:

 // Compute the arcs! // They are stored in the original data order. var arcs = []; index.forEach(function(i) { var d; arcs[i] = { data: data[i], value: d = values[i], startAngle: a, endAngle: a += d * k }; }); return arcs; 

---

Does it help?

Answer 2

I know that this was the year you asked these questions, but simply discarded the answer that could help others. Try using arc.centriod () to convert the circles you want to display.

Something like that

 enterMenu.append("circle") .attr("r", 5) .attr('transform',function(d){ return "translate(" + arc.centriod(d) + ")"; }); 

This should place the circle exactly between the cut. In the above function, d is the endAngle of the arc.

For reference, check out this link http://bl.ocks.org/Guerino1/2295263

Answer 3

This may seem trivial, but I tried to find the x and y coordinates inside each fragment, and when I saw the above formula,

x = cx + r * cos (a)

y = cy + r * sin (a)

this can be done by increasing r from (cx + 1 or cy + 1) to the length of the radius and repeating, increasing (a) from the start angle to the destination angle, then add (cx, cy). Hope this helps someone.