在D3.js中转换旭日 [英] Transitioning sunburst in D3.js
问题描述
我使用d3做了一个数据驱动的可视化。我有一个类似于sunburst的结构（但有一个单一的图层，在中间有一个洞的一种饼图）。
点击键盘上的箭头数据可视化的变化，所以它做阳光。特别是innerRadius变化取决于数据的特定属性和某些元素被添加，删除和更新。
我不能管理从一个正确地过渡到另一个旭日。
例如，假设我在后面两个数据中有共同的元素，例如
[{'name'：'A'，'value'：100}，{'name'：'B'，'value'： 100}，{'name'：'C'，'value'：100}]
/ p>
[{'name'：'A'，'value'：300}，{'name'：'D' value'：200}]。
在上面的例子中，我希望对应于元素A的弧被平滑地更新在d3网站的Sunburst示例上，B和C元素消失（我设法这样做），D元素显示得很顺利，如增长的弧线或类似的东西。
我试着努力，但我总是得到如下的控制台日志：
错误：问题解析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和另一个之间变化，但我dunno如何解决它。
< DIV CLASS =h2_lin>解决方案
解析错误是由SVG的的椭圆弧命令， A 。椭圆弧具有rx ry x轴旋转大弧标志扫描标志x y的形式。如果对arc命令使用默认路径插值，可能会无意中尝试插入其中一个标志，其值只能为零或一。如果您启用或总是会发生这个错误禁用innerRadius。
您不应该使用的为 =https://github.com/mbostock/d3/wiki/SVG-Shapes#wiki-arc rel =noreferrer> d3.svg.arc path data;圆弧必须在极坐标使用定制吐温进行插值。这里有两个简短的示例演示如何在数据空间中插入弧线：
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).
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}]
and
[{'name': 'A', 'value': 300}, {'name': 'D', 'value': 200}].
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:
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"
I think there's a problem when the data changes between one viz and the other but I dunno how to solve it.
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屋！
