我正在根据迈克博斯托克的Zoomable Sunburst例子进行一场森伯斯特战争.
我希望能够使用全新的JSON(具有相同的结构但不同的'size'值)更改基础数据,并让sunburst为转换设置动画以反映更新的数据.
如果我使用.data()更改路径元素的数据,然后尝试以下列方式更新:
path.data(partition.nodes(transformed_json))
.transition()
.duration(750)
.attrTween("d", arcTween(transformed_json));
Run Code Online (Sandbox Code Playgroud)
(..几乎与点击fn完全相同的代码)
function click(d) {
path.transition()
.duration(750)
.attrTween("d", arcTween(d));
}
Run Code Online (Sandbox Code Playgroud)
..我发现sunburst确实正确地改变了以反映新数据,但它会卡入到位而不是平滑过渡,就像放大时一样.
http://jsfiddle.net/jTV2y/ < - 这是一个隔离问题的jsfiddle(点击'Run'后转换发生一秒钟)
我猜我需要创建一个不同的arcTween()fn,但我的d3理解还没有.非常感谢!
我正在用d3进行数据驱动的可视化.我有一个类似于森伯斯特的结构(但是有一层,有一个饼图,中间有一个洞).
通过单击键盘上的箭头,数据可视化变化,因此它可以进行日蚀.特别是innerRadius根据数据的特定属性而改变,并且添加,删除和更新一些元素.
我无法正确地从一个到另一个森伯斯特过渡.除了更新现有元素之外,过渡几乎没有问题.
例如,假设我在以下两个数据中有共同的元素来可视化,例如
[{'name': 'A', 'value': 100}, {'name': 'B', 'value': 100}, {'name': 'C', 'value': 100}]
Run Code Online (Sandbox Code Playgroud)
和
[{'name': 'A', 'value': 300}, {'name': 'D', 'value': 200}].
Run Code Online (Sandbox Code Playgroud)
在上面的例子中,我希望对应于元素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"
Run Code Online (Sandbox Code Playgroud)
我认为当数据在一个viz和另一个之间发生变化时会出现问题,但我不知道如何解决它.