score:0

*Accepted answer*

This is in part a repeat of Lars' equations from the comments, but I thought it was worth recapping all at once because the trig identities for converting from angles to x/y coordinates won't match your trig text book.

Most text books assume that angles start at the right horizontal axis and increase counter-clockwise, and that the vertical axis has larger values higher up on the page.

In SVG, larger y values are lower on the page, and the angles created by the pie chart layout (and the example code the OP is using for the sunburst layout) draw an angle of zero as vertical line to the top of the circle, with angles increasing clockwise.

With that information, you can convert to x and y values with the following trig equations:

```
g.append("circle") //circles inherit pie chart data from the <g>
.attr("r", 5)
.attr("cx", function(d) {
return Math.sin((d.startAngle + d.endAngle)/2) *radius;
})
.attr("cy", function(d) {
return -Math.cos((d.startAngle + d.endAngle)/2) *radius;
});
```

Live example: http://fiddle.jshell.net/4x9ap/1/

Again, this simple example uses a *pie chart layout*, so the data has `startAngle`

and `endAngle`

values, and the radius is constant. For a sunburst diagram made with the *partition layout*, you would replace `(d.startAngle + d.endAngle)/2`

with `d.x + d.dx/2`

, and you would replace `radius`

with a function based on `d.depth`

.

score:0

As an alternative to trigonometry, you could use transformations to position the circles. If the first step in a transformation is a rotation, and then you apply a translation afterwards, the translation will be applied in the rotated coordinate system.

A little extra complication, though, is that the d3 pie chart gives angles in radians (since that's what the trigonometry functions use), but the rotation needs angles in degrees.

```
var degreesPerRadian = 180/Math.PI;
g.append("circle") //circles inherit pie chart data from the <g>
.attr("r", 5)
.attr("transform", function(d) {
return "rotate(" + degreesPerRadian*((d.startAngle + d.endAngle)/2)
+ ")" +
//rotate by the average of the start and end angle
//Note that d3 specifies angles in radians, but the rotate
//function needs them in degrees
"translate(0," + -radius + ")";
//then translate "up" the distance of the radius;
//"up" is interpretted according to the rotated coordinates,
//but for zero rotation it will position the dot at the top
//of the circle, which is the zero angle for d3
});
```

Live example: http://fiddle.jshell.net/4x9ap/

(based on this simple pie chart code )

Source: stackoverflow.com

#### Related Query

- append a circle in middle of all my path (sunburst)
- Find centroid of topoJSON path and use it to position a circle in D3
- moving a circle along a d3 path animating at varying speeds
- How to make all the nodes circle the center node?
- Path in SVG placed in front of the circles in D3 chart, despite the order of append
- Draw a path out gradually from the middle
- D3 sunburst diagram: Setting arc.cornerRadius() causes invalid path with arcTween
- Unable to append path to svg
- All circle elements stuck behind each other
- How to fix unwanted circle on / break down of SVG path element for Sankey links with d3?
- Append a line to an end of a path in area chart d3
- D3 Sunburst clip path of text
- Draw a path from an origin point to the outside radius of a circle
- Target SVG path to the middle of rect element
- How to calculate a modified Path for different size circle in Force directed arrow graph?
- D3.js: append path to a rect
- Circle Not Generating For All Value In csv File In ScatterPlot d3js
- Multiple line chart append path directly
- D3 changes from Version 3.0 to make a circle path of points
- Put text in the middle of a circle using. d3.js
- Clip path for animated line and circle in d3 js
- D3JS - animate a circle along an svg path at a constant speed
- Add a vertex in the middle of a path with d3js
- append circle to map in d3
- How to add a circle in the middle of donut chart and fill it in d3 js?
- How to append path from data inside nested structure in d3.js?
- D3js - Circle position vs radius of circle or curved path
- Trying to animate a circle along an arc path in D3.js (v3)
- Data manipulation : How can I append path from my data array?
- D3: Cannot append simple path to svg container

#### More Query from same tag

- Accessing C# function in Javascript
- Array within bound data (dynamically generating d3.svg.line with constancy) with d3.js
- C3.js change label position of Line Chart Y axis to center up of Y axis
- Updating links on a force directed graph from dynamic json data
- Chart does not reflect active entries unless I set it to array.slice() in the markup -- this will disable selecting points - Stackblitz inside
- render dc.js charts on brushmove instead of brushend
- Grouped bar chart with zoom and updateable data error
- d3.js div tooltip not appearing anymore in wordpress
- how to update data form file json using d3.js (zoomable circle pack)
- trying to generate bar chart in d3 using object-oriented approach
- NVD3 - Adding and resizing multiple vertical lines to stacked area chart
- How to combine several jQuery mouseover functions into one reusable mouseover function
- Dimple.js Update chart when select dropdown criteria
- Time format not working in dc.js LineChart
- nvd3.js : unable to bind onClick event with the data points in the svg
- d3 topojson incorrect datatype in webpack/react
- Place image at location with Planetary.js
- how do I set up a grouping query on the server side. I want set up the query so I can use it for a pie chart in front end, using d3js
- Updated d3v4 fiddle not working
- Duplicated objects after adding node
- zooming on svg with d3 in angular
- How to add a simple arc with D3
- D3.js v4: Access current DOM element in ES6 arrow function event listener
- D3 Datum Update Boxplot
- Proper way to integrate JS in Angular
- Interactive Plot of Pandas Data-frame Color coding based on a group from a Column
- Min and Max function in d3.js
- d3.js parsing date error with csv file
- d3 zoom consumes event and prevents mouseover
- How to add external svg file (by D3.js) to Leaflet map