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).

By clicking the arrow on keyboard the data visualized changes and so it does the sunburst. In particular the innerRadius changes depending on a particular property of the data and some elements are added, deleted and updated.

I cannot manage to transition correctly from one to another sunburst. The transition is almost ok apart from the update of existing element.

For example suppose I have common elements in the two following pieces of data to visualize such as

[{'name': 'A', 'value': 100}, {'name': 'B', 'value': 100}, {'name': 'C', 'value': 100}]

and

[{'name': 'A', 'value': 300}, {'name': 'D', 'value': 200}].

In the above example I'd like that the arc corresponding to the element A is updated smoothly as it is on the Sunburst example on d3 website, the B and C elements disappear (and I managed to do that) and the D elements appears smoothly such as a growing arc, or something like that.

I tried hard but I'm always getting console logs such as the following:

Error: Problem parsing d="M307.2125548508473,-80.28703629255259A350,350 0 0.816469152,1 -241.27474698802394,61.83978850098657L-172.92635975175665,38.77767308406868A238.60164101523165,238.60164101523165 0 0.816469152,0 210.15560219262875,-60.13103059122014Z"

I think there's a problem when the data changes between one viz and the other but I dunno how to solve it.

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)