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

Question

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

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

我也在查看节点链接树：

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

我想做的是：

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

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

Answer 1

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

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

然后遍历您的节点数组并设置x, y, px,py值以反映新的Xand Y。这将使您的节点在您运行时知道力布局的当前x和位置yforce.start()

你可以看看plotLayout()这个例子中的函数：

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

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