d3 "end-of-ticking" event for force layout

Question

I'm working with d3's force layout and trying to find a simple way to identify when the layout has reached a steady state (i.e. when the tick function has stopped manipulating the position of nodes).

My definition of force looks like this...

var force = d3.layout.force()
        .friction(frictionValue) 
        .theta(thetaValue)
        //.alpha(0.1) 
        .size([width, height])
        .gravity(gravityValue) 
        .charge(chargeValue) 
        .on("tick", tick); 

Then the tick function begins...

function tick(e) {
...

I assumed that "e" would be key to catching the end-point of the simulation, but since I'm not explicitly passing e to the tick function on my force definition I'm not really sure what it represents or how I might be able to use it to identify the end of the simulation. Can anyone either shed light on the function of e (since I'm not explicitly passing it a value), or even suggest a better method to do something as simple as display an "alert(..)" message once the force layout simulation has ended?

Huge thanks in advance for any help at all!

Answer 1

You're almost right, just tick is the wrong event, you want end. So change your last line to

.on("end", function (){
    // some code
});

You can read about this in the API documentation for the force layout https://github.com/mbostock/d3/wiki/Force-Layout