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

Question

我正在使用D3.js库并查看强制导向的图形演示：

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

我也在查看节点链接树：

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

我想做的是：

- 从强制导向图开始，当用户点击a时    节点，使用所选节点将其平滑地动画到树中    在中心。   - 然后，当用户点击画布中的任何空白区域时，它    应该动画回到力导向图。

之前有没有人做过这样的事情，或者对最佳方法有任何建议？我是D3.js的新手，不知道框架是否支持这个。

Answer 1

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

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

然后遍历您的节点数组并设置x，y，px，py值以反映新的X和{{1} }。这会将您的节点设置为在运行Y

时知道力布局的当前x和y位置

您可以查看此示例中的force.start()函数：

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

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