d3.js - 如何确定强制布局是否完成放置节点？

Question

我有基于力布局的图表。我想放置一个“加载”覆盖，直到图表完成放置节点。我可以使用什么事件/属性来确定该图表已完成？

我检查了API，找不到任何东西..

Answer 1

从文档中，end事件在布局完成时调度，即 when force.alpha === 0。

因此，您可以了解何时完成：

force
  .nodes(yourNodes)
  .links(yourLinks)
  .on('tick', function() {
    // layout is in progress
  })
  .on('end', function() {
    // layout is done
    callback();
  });

Answer 2

当布局收敛时，force.alpha()将设置为 0。设置一个计时器来轮询（不要太频繁！），你会知道什么时候完成。

此示例应每interval毫秒重试一次，直到布局停止。该变量timer保留当前计时器，如果您不想再等待布局完成，可以将其重置。

var timer = null;
function onCompletion(force, callback, interval) {
    interval = interval || 300;

    function retryIfRunning() {
        if (force.alpha() != 0)
            timer = setTimeout(checkAndRetry, interval);
        else {
            timer = null;
            callback();
        }
    }

    retryIfRunning();
}

Answer 3

它不可能作为内置功能，因为它取决于您认为放置节点时所做的工作。它的完成方式是调用tick函数n时间，n具体取决于您拥有的图形的大小和您想要的精度。

#force.tick()：运行力布局模拟一步。

force.tick()如果您想了解更多信息，我鼓励您阅读文档： https ://github.com/mbostock/d3/wiki/Force-Layout#wiki-tick