如何确定力布局是否完成放置节点？

Question

我有基于力布局的图表.我想放置一个'加载'叠加层,直到图表完成放置节点.我可以使用什么事件/属性来找出该图表？

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

Answer 1

从文档中,在end布局完成时调度事件,即何时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();
}