javascript - D3 Pie chart arc is invisible in transition to 180° - Stack Overflow

admin管理员组

文章数量:1417724

I've a pie chart build with d3 and svg. I use transitions on the d attribute of the svg path to animate changes in the pie chart. Is works as expected except when the target size of the arc is >=180°. Then the arc path is invisible during the transition.

Demonstration:

I think this is because d3 produces invalid path information during the transition:

Error: Problem parsing d="M1.4082973068957338e-14,-230A230,230 0 0.0000013720000000000002,1 135.1904225457546,186.07396897283516L0,0Z"

Am I doing something wrong? Is this a bug and is there a way to work arround?

Thanks

I've a pie chart build with d3 and svg. I use transitions on the d attribute of the svg path to animate changes in the pie chart. Is works as expected except when the target size of the arc is >=180°. Then the arc path is invisible during the transition.

Demonstration: http://jsbin./EXeXUXE/4/edit

I think this is because d3 produces invalid path information during the transition:

Error: Problem parsing d="M1.4082973068957338e-14,-230A230,230 0 0.0000013720000000000002,1 135.1904225457546,186.07396897283516L0,0Z"

Am I doing something wrong? Is this a bug and is there a way to work arround?

Thanks

• javascript
• svg
• d3.js

Share Improve this question Follow asked Jan 22, 2014 at 14:17 LuxLux 18.3k55 gold badges4747 silver badges7676 bronze badges 3

• 1 You can't use the normal transition/tween to animate radial charts, you need a custom tween function -- this has been covered numerous times for pie charts, see e.g. this example. – Lars Kotthoff Commented Jan 22, 2014 at 14:41
• @Lars, thanks. Its logical that its not producing a nice rotation animation, but why is it producing illigal paths instead of an non optimal transition? – Lux Commented Jan 22, 2014 at 14:59
• 1 I'll add an answer with some explanation. – Lars Kotthoff Commented Jan 22, 2014 at 15:24

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 10

The problem here is that d3.svg.arc() uses the A SVG path mand to draw the elliptical arc. The format of that mand is as follows.

A (rx ry x-axis-rotation large-arc-flag sweep-flag x y)+

The meaning of the individual parameters is not important, the only thing relevant here are large-arc-flag and sweep-flag. According to the SVG spec

• Of the four candidate arc sweeps, two will represent an arc sweep of greater than or equal to 180 degrees (the "large-arc"), and two will represent an arc sweep of less than or equal to 180 degrees (the "small-arc"). If large-arc-flag is '1', then one of the two larger arc sweeps will be chosen; otherwise, if large-arc-flag is '0', one of the smaller arc sweeps will be chosen,
• If sweep-flag is '1', then the arc will be drawn in a "positive-angle" direction (i.e., the ellipse formula x=cx+rx*cos(theta) and y=cy+ry*sin(theta) is evaluated such that theta starts at an angle corresponding to the current point and increases positively until the arc reaches (x,y)). A value of 0 causes the arc to be drawn in a "negative-angle" direction (i.e., theta starts at an angle value corresponding to the current point and decreases until the arc reaches (x,y)).

As their names suggest, these are flags, i.e. 0/1 values. This is what d3.svg.arc() generates. However when you interpolate between them using .transition() with the default path tween, D3 interprets them as numerical values and not as flags. The means that intermediate paths will have values between 0 and 1 for these flags, which are illegal. It is because of that that the parsing fails.

To fix, use a custom tween (which you need to use for radial paths anyway). See e.g. here for an example that shows you how to do it.

本文标签： javascriptD3 Pie chart arc is invisible in transition to 180176Stack Overflow