Multiple charts misbehave (1st one works while others zoom incorrectly)

[theronic]

Describe the bug

Mounting multiple charts with the same data but different .size() functions render correctly initially, but any chart mounted after the first misbehaves when clicking on nodes. Suspected ID or event handler conflicts, or .size() function is being globally shared between charts.

To Reproduce
Steps to reproduce the behavior:

1. Render two charts on same screen using the same data but different .size() functions
2. Both Sunburst charts render correctly initially.
3. Clicking on nodes on first charts zooms and renders children correctly.
4. Clicking on nodes in the second or third chart zooms to wrong node, does not render children, or or renders blank.
5. If you now swap the charts around, the first one behaves, but the second & third charts misbehave, suggesting that not related to the data passed in, but possible global state.

Desktop (please complete the following information):

• OS: macOS
• Browser: Brave
• Version: 1.83.112 (Chromium: 141.0.7390.70)

Additional context
Will try to repro in minimal shareable example later.

[theronic]

Resolved by passing a cloned data value for each Sunburst charts. Charts don't seem to play well together when sharing the same data instance – I assume the chart modifies data.

(Prior investigation:

I can find no global state in sunburst.js that could be causing this, except possibly ID generation if charts are mounted concurrently (I'm calling it from Electric Clojure / Missionary which is maximally concurrent, even though JS is single-threaded).

chartId is randomly generated and hidden-arc IDs are generated from it + d.id in .attr('id', d => hidden-arc-${state.chartId}-${d.id});. Possibly concurrently mounting D3 could be conflicting (I don't know). It would be nice if the caller could pass in chartId). Super unlikely that there's a conflict there – I'd have to look at the generated IDs for any conflicts.)