D3 Zoomable Sunburst - Fixing Ring Thickness

119 views Asked by At

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.

0

There are 0 answers