D3圆图在过渡到180°时不可见 [英] D3 Pie chart arc is invisible in transition to 180°

问题描述

我有一个饼形图生成与d3和svg。我使用svg路径的 d 属性上的转换来动画化饼图中的更改。除了当弧的目标尺寸> = 180°时，工作原理。

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.

演示： http://jsbin.com/EXeXUXE/4/edit

我认为这是因为d3在转换期间产生无效的路径信息：

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"

我做错了什么？

感谢

推荐答案

这里的问题是 d3.svg.arc（）使用 A SVG路径命令绘制椭圆弧。该命令的格式如下。

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)+

各个参数的意义不重要，唯一相关的是 large-arc-flag 和 sweep-flag 。根据 SVG规范

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

• 在四个候选弧扫描中，两个将表示大于或等于180度的弧扫描（大弧），两个将表示弧扫描小于或等于180度（小弧）。如果large-arc-flag为'1'，则选择两个较大的弧扫描中的一个;否则，如果large-arc-flag为'0'，则将选择较小的弧扫描之一


• 如果sweep-flag为1，评估正角方向（即椭圆公式x = cx + rx * cos（θ）和y = cy + ry * sin（θ）），使得θ以对应于当前点的角度开始并且增加直到电弧到达（x，y））。值为0导致弧沿负角方向绘制（即，θ从对应于当前点的角度值开始并且减小，直到弧达到（x，y））。

顾名思义，这些是标志，即0/1值。这是 d3.svg.arc（）生成的。但是，当使用 .transition（）在它们之间插入默认路径补间时，D3将它们解释为数值，而不是标志。对于这些标志，中间路径的值将介于0和1之间，这是非法的。这是因为解析失败。

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.

这篇关于D3圆图在过渡到180°时不可见的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！