在 D3.js 中转换旭日 [英] Transitioning sunburst in D3.js
问题描述
我正在使用 d3 进行数据驱动的可视化.我有一个类似于森伯斯特的结构(但只有一层，有点像中间有洞的饼图).
I'm doing a data-driven visualization with d3. I have a structure similar to the sunburst (but with a single layer, sort of a pie chart with a hole in the middle).
通过单击键盘上的箭头，可视化的数据会发生变化，因此它会产生旭日形.具体而言，innerRadius 会根据数据的特定属性而变化，并且会添加、删除和更新某些元素.
By clicking the arrow on keyboard the data visualized changes and so it does the sunburst. In particular the innerRadius changes depending on a particular property of the data and some elements are added, deleted and updated.
我无法正确地从一个旭日形过渡到另一个旭日形.除了更新现有元素外，过渡几乎没问题.
I cannot manage to transition correctly from one to another sunburst. The transition is almost ok apart from the update of existing element.
例如，假设我在以下两个数据中具有共同元素以进行可视化，例如
For example suppose I have common elements in the two following pieces of data to visualize such as
[{'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元素看起来很流畅，例如不断增长的弧线或类似的东西.
In the above example I'd like that the arc corresponding to the element A is updated smoothly as it is on the Sunburst example on d3 website, the B and C elements disappear (and I managed to do that) and the D elements appears smoothly such as a growing arc, or something like that.
我很努力，但总是收到如下控制台日志:
I tried hard but I'm always getting console logs such as the following:
<代码>错误:问题解析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"
我认为当数据在一个可视化和另一个可视化之间发生变化时会出现问题，但我不知道如何解决.
I think there's a problem when the data changes between one viz and the other but I dunno how to solve it.
推荐答案
解析错误是由 SVG 的 椭圆弧命令，A.椭圆弧的形式为rx ry x 轴旋转大弧标志扫掠标志 x y".如果您对 arc 命令使用默认路径插值，您可能会无意中尝试插值其中一个标志，该标志的值只能为零或一.如果您启用或禁用innerRadius，此错误将始终发生.
The parse error is caused by a naïve path interpolation of SVG's elliptical arc command, A. Elliptical arcs have the form "rx ry x-axis-rotation large-arc-flag sweep-flag x y". If you use default path interpolation on arc commands, it's possible that you'll inadvertently attempt to interpolate one of the flags as well, which can only have the value zero or one. This error will always happen if you enable or disable the innerRadius.
您不应该将 默认字符串插值器用于
You shouldn't use the default string interpolator for d3.svg.arc path data; arcs must be interpolated in polar coordinates using a custom tween. Here are two short examples demonstrating how to interpolate arcs in data space:
这篇关于在 D3.js 中转换旭日的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
