Tracking the stepwise movements of the force-directed graph layout in d3.js is useful when creating more intricate and/or dynamic graphs. Unfortunately, in its current implementations, these changes are fleeting and hard to see due to the speed with which the layout is updated. Slowing it down can help to see how each tick event updates the positions of each node. A method for doing this is described by @DavidBruant in a thread about running the force simulation faster. Keep in mind that this is a hack and probably shouldn’t be used for anything production-related.
Implementing this slowdown requires slightly changing d3.js. To adjust the desired
delay between each tick event, simply change the setTimeout(tick, 234) line.
pkerp@toc:~/projects/emptypipes$ diff js/d3.js js/d3_slow.js
6228c6228,6233
< d3.timer(force.tick);
---
> setTimeout(function tick(){
> force.tick();
> if(alpha >= .005)
> setTimeout(tick, 234);
> }, 0);
> //d3.timer(force.tick);The modified version of d3.js used in the ‘slow’ example abov used in the ‘slow’ example abovee is available here.