在D3.js过渡森伯斯特

时间:2012-04-10 13:10:46

标签: javascript d3.js transition sunburst-diagram

我正在使用d3进行数据驱动的可视化。我有一个类似于旭日的结构(但是有一个单层,有一个饼图,中间有一个洞)。

通过单击键盘上的箭头,数据可视化变化,因此它会进行旭日形成。特别是innerRadius根据数据的特定属性而改变,并且添加,删除和更新一些元素。

我无法正确地从一个太阳爆发到另一个太阳爆发。除了更新现有元素外,过渡几乎没有。

例如,假设我在以下两个数据中有共同元素可视化,例如

[{'name': 'A', 'value': 100}, {'name': 'B', 'value': 100}, {'name': 'C', 'value': 100}]

[{'name': 'A', 'value': 300}, {'name': 'D', 'value': 200}].

在上面的例子中,我希望对应于元素A的弧顺利更新,因为它在d3网站上的Sunburst示例中,B和C元素消失(我设法做到了)和D元素看起来很平滑,例如增长的弧形,或类似的东西。

我努力了但是我总是得到如下控制台日志:

Error: Problem parsing d="M307.2125548508473,-80.28703629255259A350,350 0 0.816469152,1 -241.27474698802394,61.83978850098657L-172.92635975175665,38.77767308406868A238.60164101523165,238.60164101523165 0 0.816469152,0 210.15560219262875,-60.13103059122014Z"

我认为当数据在一个viz和另一个之间发生变化时会出现问题,但我不知道如何解决它。

1 个答案:

答案 0 :(得分:10)

解析错误是由SVG的elliptical arc command A 的天真路径插值引起的。椭圆弧的形式为“rx ry x-axis-rotation large-arc-flag sweep-flag x y”。如果对arc命令使用默认路径插值,则可能会无意中尝试插入其中一个标志,这些标志的值只能为零或一。如果启用或禁用innerRadius,将始终发生此错误。

您不应将default string interpolator用于d3.svg.arc路径数据;必须使用custom tween在极坐标中插入弧。以下是演示如何在数据空间中插入弧的两个简短示例: