javascript - 如何从力布局图转换为已定位节点的图？

Question

我有一个部队布局图。我有一个按钮，当我单击它时，它会按某种顺序对节点进行排序。为它们提供屏幕上的绝对坐标。

我希望，当我单击此按钮时，能够在两个 Action 之间平滑过渡，而不是直接跳入其中。我想这样做，这样我就可以看到节点来自哪里

Answer 1

当用户点击切换到“静态”定位时:

1. 停止强制布局(通过调用 .stop() 或取消订阅/忽略 "tick" 事件)。

2. 将您想要的定位应用于所有节点。我所说的节点，是指传递给 force.nodes() 的数组，强制布局已使用 x 和 y 值进行更新。在“静态”模式下，您需要自行设置 x 和 y 坐标，无论您需要什么。

3. 调用您的更新函数(或渲染、刷新或任何您调用的函数)。这假设您已经拥有这样的更新函数，您可以在力布局的每个刻度处调用该函数。在步骤 1 和 2 之后，调用此更新函数应该“正常工作”，因为它不应该知道是否存在强制布局或其他正在移动节点的逻辑。在这个函数中，您必须使用 d3 常用的输入、更新、退出。在这里，您可以使用 d3 的 transition() 方法使所有 DOM 节点从强制布局最后放置它们的位置平滑过渡到静态布局逻辑放置它们的位置。

4. 您可能会发现您只想在静态模式下调用 transition()，而不是在强制布局模式下，因此您可能需要将更新函数的逻辑细化为仅可选择在选择上调用 transition()。