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

时间:2013-01-18 20:26:49

标签: d3.js force-layout

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

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

3 个答案:

答案 0 :(得分:17)

the documentation开始,在布局完成时调度end事件,即force.alpha === 0时。{/ p>

所以你可以找到它完成的时间:

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

答案 1 :(得分:6)

当布局收敛时,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();
}

答案 2 :(得分:2)

它不可能作为内置功能,因为它取决于您认为放置节点的操作。完成它的方法是调用tick函数n次,n,具体取决于您拥有的图表大小和所需的精度。

  

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

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