animation - D3.js - 是否可以在力导向图和节点链接树之间设置动画？

Question

我正在使用 D3.js库并查看力导向图演示:

http://mbostock.github.com/d3/ex/force.html



我也在查看节点链接树:

http://mbostock.github.com/d3/ex/tree.html



我想做的是:

- 从力导向图开始，当用户点击一个
节点，让它平滑地动画成一棵树，带有选定的节点
在中心。
- 然后，当用户点击 Canvas 中的任何空白区域时，它
应该动画回到力导向图。

有没有人以前做过这样的事情，或者对最好的方法有什么建议？我是 D3.js 的新手，不知道框架是否支持它。

Answer 1

您需要做的是停止力并将现有节点的转换应用于从其他布局派生的 x-y。所以你的函数看起来像这样:

force.stop();
d3.selectAll("g.nodes").transtion().duration(500)
    .attr("translate","transform("+newLayoutX+","+newLayoutY+")"

然后遍历您的节点数组并设置 x , y , px , py值以反射(reflect)新 X和 Y .这将使您的节点知道当前 x和 y运行时力布局的位置 force.start()
你可以看看plotLayout()本例中的函数:

https://gist.github.com/emeeks/4588962

不过，这不依赖于第二个 d3.layout。您将遇到的问题是您需要一个用于树布局的分层数据集，这要求您按照分层布局中的预期将节点和边数据转换为 node.children 数组。我这样做的方法是复制数据集并手动将其展平，但可能有我不知道的更优雅的解决方案。