Sunburst Example - with useSpring about react-spring-examples

[aleclarson]

Please try with the latest canary. 👍

[evastr]

Unfortunately it does not work with "[email protected]" either. The animation of the color works, but the path is not animated.

[aleclarson]

If you put the code into a sandbox, I'll look into it. 👍

[evastr]

Please find the code here: https://codesandbox.io/s/misty-sun-75d0m?fontsize=14&hidenavigation=1&theme=dark
Many thanks for your help.

[aleclarson]

You were resetting the xy domain and y range during render, which is a no-no.

+  const xScale = scaleLinear().range(xRange);
   const yScale = scaleSqrt();
-
-  // Map input domain to output range
-  // xScale.domain(xDomain).range(xRange);
-  // yScale.domain(yDomain).range(yRange);

[evastr]

Still not working as expected - please send a link to a codesandbox that works.

[aleclarson]

You're right, my solution isn't complete. You'll want to ensure all state is cached with useState or you won't get the expected result. Specifically, these values need to be reused between renders:

https://github.com/react-spring/react-spring-examples/blob/bb119ece9675498108f2472e23235fdcd641f73b/demos/renderprops/sunburst/index.js#L39-L45

This isn't an issue with react-spring, so I can't help you further.