I have been working on a D3 Zoombable Sunburst based on the following example: https://observablehq.com/@d3/zoomable-sunburst.
From the modifications I have made, the diagram is near to my requirements. However, I am having issues in forcing the first inner ring to have a fixed thickness. As I understand it, the sizing is calculated based on the JSON data.
I have looked at the following StackOverflow post as a starting point: D3 Sunburst. How to set different ring\level widths but the section of code I need to modify differs as the Zoomable Sunburst is using different arc variables. Being new to D3's I am not to sure why these differ.
The code I need to rework is where the inner and outer radius's are getting set:
var arc = d3.arc()
.startAngle(d => d.x0)
.endAngle(d => d.x1)
.padAngle(d => Math.min((d.x1 - d.x0) / 2, 0.005))
.padRadius(radius * 2.5)
.innerRadius(d => d.y0 * radius)
.outerRadius(d => Math.max(d.y0 * radius, d.y1 * radius - 1));
On a final point - How can I ensure these calculations are retained when the user clicks through different layers? Based on the various tweaks I was testing in an attempt to fix the thickness of a ring, the original calculations are wiped.
Any help is appreciated.