D3.js v7: Need help with sunburst .transition()

Community Help
1

Hello everyone,
I am currently learning d3.js and have already been able to build a working heatmap. Now I’m trying to create a sunburst chart. Since I’m also new to observale and don’t know how to post my code here yet, so you can find my code on JSFiddle for now.

So far everything works, but whenever the data source is updated and the .transition() gets fired, I get the following error multiple times:

attribute d: Expected arc flag (‘0’ or ‘1’), “….666,183.666,0,0.929045041148351…”

Does anyone know what the error means and how I can fix it?

I would be very grateful for any advice!
Best Regards

2

It’s not possible to transition arc path definitions directly, since they contain a bit which is 0 or 1 and should not be anything else (like 0.33 during the transition). Instead, you need to use attrTween; see the example here, with detailed comments: Arc Tween / D3 | Observable

3

Hey Fil,

I really appreciate this, I’ve been trying to make progress on this for days. I’ll try it out right now.

Best Regards

1 Like