javascript - Transitioning sunburst in D3.js - Stack Overflow

admin管理员组

文章数量:1356815

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

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

• javascript
• d3.js
• transition
• sunburst-diagram

Share Improve this question Follow edited Jul 4, 2014 at 14:36 VividD 10.5k88 gold badges6666 silver badges112112 bronze badges asked Apr 10, 2012 at 13:10 RMinelliRMinelli 19133 silver badges1313 bronze badges 2

• could you provide a link or some reference code? Hard to say what the problem could be w/o a little more details... – dsummersl Commented Apr 10, 2012 at 13:40
• U're right. Anyway the snippet that Mike gave me worked like a charm. Thanks for interest though. – RMinelli Commented Apr 10, 2012 at 15:11

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 10

The parse error is caused by a naïve path interpolation of SVG's elliptical arc mand, 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 mands, 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)

本文标签： javascriptTransitioning sunburst in D3jsStack Overflow