how find out if force layout done placing the nodes?

Question

I have graph based on force layout. I would like to put a 'loading' overlay until the graph is done placing the nodes. What event/property can I use to find out that graph is done?

I checked the API, could not find anything..

Answer 1

From the documentation, the end event is dispatched when the layout is done, i.e. when force.alpha === 0.

So you can find out when it is done with:

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

Answer 2

When the layout converges, force.alpha() will be set to 0. Set a timer to poll for that (not too often!) and you'll know when you're done.

This example should retry every interval milliseconds until the layout stops. The variable timer keeps the current timer, which you can reset if you don't want to wait for the layout to complete any more.

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();
}