如何防止 d3.js 强制布局在恢复/重启时脉动/弹跳

Posted 2023-02-22

【中文标题】如何防止 d3.js 强制布局在恢复/重启时脉动/弹跳

【英文标题】：How to prevent d3.js force layout from pulsating/bouncing on resume/restart

【发布时间】：2014-12-19 14:45:03

【问题描述】：

我有一个 d3 强制布局，我偶尔会在用户交互时恢复以让节点移动一点。不幸的是，这具有每次恢复时都会反弹/脉动所有节点的不良（对我而言）效果。就好像重力暂时增加了几分之一秒，将所有节点向内拉。

要重新创建，请打开此页面 http://bl.ocks.org/mbostock/raw/4062045/，然后在控制台中运行 force.resume()。您可以在 Mike Bostock 的任何 force bl.ocks 示例中看到这种效果。

有没有办法防止这种情况发生？我尝试将所有节点设置为固定一段时间，直到重力恢复正常，但它不起作用。

【问题讨论】：

你可以试试.charge()。

你发现了吗？我也有同样的问题。谢谢。

【参考方案1】：

您可以在绘图前运行前 x 个刻度。这会停止弹出：

  const simulation = d3.forceSimulation(nodes)
      .force("link", forceLink)
      .force("charge", forceNode)
      .force("center",  d3.forceCenter())
      .tick(2000) // tick 2000 times (enough for the system to rest)
      .on("tick", ticked)
  

;