[英]D3 Pie chart arc is invisible in transition to 180°
I've a pie chart build with d3 and svg. 我用d3和svg构建了一个饼图。 I use transitions on the
d
attribute of the svg path to animate changes in the pie chart. 我在svg路径的
d
属性上使用转换来为饼图中的更改设置动画。 Is works as expected except when the target size of the arc is >=180°. 除非弧的目标尺寸> = 180°,否则是按预期工作。 Then the arc path is invisible during the transition.
然后在过渡期间弧形路径是不可见的。
Demonstration: http://jsbin.com/EXeXUXE/4/edit 演示: http : //jsbin.com/EXeXUXE/4/edit
I think this is because d3 produces invalid path information during the transition: 我认为这是因为d3在转换过程中产生了无效的路径信息:
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?
这是一个错误,有没有办法工作arround?
Thanks 谢谢
The problem here is that d3.svg.arc()
uses the A
SVG path command to draw the elliptical arc. 这里的问题是
d3.svg.arc()
使用A
SVG path命令绘制椭圆弧。 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
. 各个参数的含义并不重要,这里唯一相关的是
large-arc-flag
和sweep-flag
。 According to the SVG spec 根据SVG规范
- 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").
在四个候选弧扫描中,两个将表示大于或等于180度的弧扫描(“大弧”),两个将表示小于或等于180度的弧扫描(“小 - 弧”)。 If large-arc-flag is '1', then one of the two larger arc sweeps will be chosen;
如果大弧标志为'1',则将选择两个较大的弧扫描中的一个; otherwise, if large-arc-flag is '0', one of the smaller arc sweeps will be chosen,
否则,如果大弧标志为'0',将选择一个较小的弧扫描,
- 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)).
如果sweep-flag为'1',那么弧将以“正角”方向绘制(即椭圆公式x = cx + rx * cos(theta)和y = cy + ry * sin(theta)评估θ,使得theta以对应于当前点的角度开始并且积极地增加直到弧达到(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)).
值0使得弧以“负角度”方向绘制(即,θ以对应于当前点的角度值开始并且减小直到弧到达(x,y))。
As their names suggest, these are flags, ie 0/1 values. 顾名思义,这些是标志,即0/1值。 This is what
d3.svg.arc()
generates. 这就是
d3.svg.arc()
生成的内容。 However when you interpolate between them using .transition()
with the default path tween, D3 interprets them as numerical values and not as flags. 但是,当您使用带有默认路径补间的
.transition()
进行插值时,D3会将它们解释为数值而不是标记。 The means that intermediate paths will have values between 0 and 1 for these flags, which are illegal. 对于这些标志,中间路径的值将介于0和1之间,这是非法的。 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.
请参阅此处的示例,了解如何执行此操作。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.