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!

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!

• javascript
• d3.js

1 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./mbostock/d3/wiki/Force-Layout