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

- Ad hoc D3 function
- d3 v5 scaleThreshold not accepting array of string colors on range?
- How to map data such that I can use it to generate pie chart?
- Merging nodes in D3.js
- dc.js - how to get chart.chartGroup to put the chart in the group
- Sub-selection based on function
- d3 text function on a selection giving undefined
- D3 and updating elements of a multidimensional array
- How to turn number strings in a list of dictionaries into integers using javascript?
- Text invisible yet appearing in inspector
- D3 offset X-axis
- d3 example of Stacked Bar Chart into jsfiddle
- D3 - access axis tick by index
- d3.js bar chart animations
- Angular-4 d3 v4 Issue: Property 'x' does not exist on type 'HierarchyNode'
- A current recommended way to visualize data with AngularJS and D3.js
- Zoom to arbitrary feature in D3 canvas
- Can I use drag.container in d3.js to restrict the dragging area?
- d3.csv: using specific row data to use in a for loop argument
- Fixed center with dynamic axis scaling
- Two way binding of wordcloud data
- Drawing circles with D3 from TSV file
- d3.js thickening only one arc
- Responsive D3 Donut Chart
- How to expand d3 shape?
- How can I create a weighted pyramid chart (looks like a pie chart)?
- d3 bar chart is upside down
- How to prevent a d3.geo map to pan, but keep zoom
- Displaying circles using d3 from data
- Dynamically import d3.js as module?