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

Question

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

在此输入图像描述

我也在看节点链接树:

在此输入图像描述

我想做的是:

- 从力导向图开始,当用户点击某个节点时,将其平滑地动画到树中,所选节点位于中心. - 然后,当用户单击画布中的任何空白区域时,它应该动画回到力导向图.

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

Answer 1

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

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

然后通过你的节点阵列迭代和设置x,y,px,py值,以反映新的X和Y.这将使您的节点在运行时知道力布局的当前位置x和y位置force.start()

您可以查看plotLayout()此示例中的函数:

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