I'm using D3's force layout to organize a network graph, and everything works smoothly.
However, I want to add a button to my UI so that the user can play/pause the layout process at will: I'd like to have a toggle button that reflects the current state of the layout: whether it's puting or not (d3 automatically will stop puting when the layout has stabilized). Is there a way to tell when force layout puting has finished and started? I expected some kind of event to handle this, but couldn't find one.
I'm using D3's force layout to organize a network graph, and everything works smoothly.
However, I want to add a button to my UI so that the user can play/pause the layout process at will: I'd like to have a toggle button that reflects the current state of the layout: whether it's puting or not (d3 automatically will stop puting when the layout has stabilized). Is there a way to tell when force layout puting has finished and started? I expected some kind of event to handle this, but couldn't find one.
Share Improve this question edited Feb 11, 2014 at 15:15 VividD 10.5k8 gold badges66 silver badges112 bronze badges asked Jul 16, 2013 at 10:21 protozooprotozoo 5706 silver badges16 bronze badges2 Answers
Reset to default 15Use the end event documented on the wiki.
d3.layout.force()
.on('end', function() { console.log('ended!'); });
jsFiddle : http://jsfiddle/zschuessler/gRqv3/ | View console to see listeners in action.
There isn't really a notion of having "stopped" puting the layout. Even when it looks like it's stationary, there may still be tiny changes. What you can do is check the value of alpha and interpret it as stopped if it falls below a threshold. In this case, you can set it to a negative value which will stop the layout explicitly. There is no specific event for this, but you can check your condition in the tick event handler.