Change d3 cancel setup

Question

I have a d3 layout chart that works very nicely, but it often gets stuck prematurely. For example, nodes are shifted to a good location, and if they “hit” them (again introducing a bit of randomness into their placement and start() , they finally get there). The problem also gets worse if I reduce friction because users find it too feverish.

I see a mention of "cancellation" (ala simulated annealling) in the force.js source code , and the public parameter alpha one component key. I am wondering if anyone understood how to manage a common list of deviations directly (without fixing force.js !)?

Answer 1

The core of the answer is @meetamit's comment (to accelerate alpha decay). You can also stop calling the layout when it drops below the threshold, and you can also deal with jitter by adding transitions to your node / link movements.

 animationStep = 200; force.on('tick', function() { node.transition().ease('linear').duration(animationStep) .attr('transform', function(d) { //your node transitions here }); var alpha = force.alpha(); force.stop(); setTimeout(function() { if (!alpha > 0.001) { force.alpha(alpha * 0.9); } }, animationStep); }; force.on('tick', tick);