D3 Pie chart arc is invisible in transition to 180°

Question

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.com/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

Answer 1

The problem here is that d3.svg.arc() uses the A SVG path command to draw the elliptical arc. The format of that command 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 (ie, 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 (ie, 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, ie 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 eg here for an example that shows you how to do it.