Transitioning sunburst in D3.js

Question

I\'m doing a data-driven visualization with d3. I have a structure similar to the sunburst (but with a single layer, sort of a pie chart with a hole in the middle).

Answer 1

The parse error is caused by a naïve path interpolation of SVG's elliptical arc command, A. Elliptical arcs have the form "rx ry x-axis-rotation large-arc-flag sweep-flag x y". If you use default path interpolation on arc commands, it's possible that you'll inadvertently attempt to interpolate one of the flags as well, which can only have the value zero or one. This error will always happen if you enable or disable the innerRadius.

You shouldn't use the default string interpolator for d3.svg.arc path data; arcs must be interpolated in polar coordinates using a custom tween. Here are two short examples demonstrating how to interpolate arcs in data space:

• How-To: Update a Pie Chart (Part 1)
• How-To: Update a Pie Chart (Part 2)