Lux*_*Lux 2 javascript svg d3.js
我用d3和svg构建了一个饼图.我d在svg路径的属性上使用转换来为饼图中的更改设置动画.除非弧的目标尺寸> = 180°,否则是按预期工作.然后在过渡期间弧形路径是不可见的.
演示:http://jsbin.com/EXeXUXE/4/edit
我认为这是因为d3在转换过程中产生了无效的路径信息:
Error: Problem parsing d="M1.4082973068957338e-14,-230A230,230 0 0.0000013720000000000002,1 135.1904225457546,186.07396897283516L0,0Z"
难道我做错了什么？这是一个错误,有没有办法工作arround？
谢谢
Lar*_*off 10
这里的问题是d3.svg.arc()使用ASVG path命令绘制椭圆弧.该命令的格式如下.
A (rx ry x-axis-rotation large-arc-flag sweep-flag x y)+
各个参数的含义并不重要,这里唯一相关的是large-arc-flag和sweep-flag.根据SVG规范
- 在四个候选弧扫描中,两个将表示大于或等于180度的弧扫描("大弧"),两个将表示小于或等于180度的弧扫描("小 - 弧").如果大弧标志为'1',则将选择两个较大的弧扫描中的一个; 否则,如果大弧标志为'0',将选择一个较小的弧扫描,
- 如果sweep-flag为'1',那么弧将以"正角"方向绘制(即椭圆公式x = cx + rx*cos(theta)和y = cy + ry*sin(theta)评估θ,使得theta以对应于当前点的角度开始并且积极地增加直到弧达到(x,y)).值0使得弧以"负角度"方向绘制(即,θ以对应于当前点的角度值开始并且减小直到弧到达(x,y)).
顾名思义,这些是标志,即0/1值.这是d3.svg.arc()产生的.但是,当您使用.transition()默认路径补间使用它们进行插值时,D3会将它们解释为数值而不是标记.对于这些标志,中间路径的值将介于0和1之间,这是非法的.正因为如此,解析失败了.
要修复,请使用自定义补间(无论如何都需要用于径向路径).请参阅此处的示例,了解如何执行此操作.