how to control the simulation speed of d3 force layout
d3.js, force-layout, javascript
Solution
Don't set a timer to call the `tick` function, this is done automatically by the force layout.
There are however a number of parameters you can set to modify the behaviour of the force layout. The ones most relevant to what you're trying to do are the following.
- `.friction()` corresponds to how quickly the velocity decays and therefore directly controls how fast nodes move. The default is 0.9, to make everything slower, set it to a lower value.
- `.charge()` controls how strong the attraction/repulsion between nodes is. This doesn't control the velocity directly, but affects it.
Of these parameters, only the latter can be set on a node-by-node basis. This makes achieving what you want a bit tricky, as you would have to carefully balance the forces. As a start, setting the charge of the nodes that you want to move slower closer to 0 should help.
There are a few other parameters of the force layout that I think would not be useful in your particular case (I'm thinking of `.linkStrength()` and `.linkDistance()`), but you may want to have a look nevertheless.
Problem
I am following a d3 force laytout example like this. I want to control the speed of the dots flying to the cluster. In other words, I want some dots take more time to get to their final positions, while some dots take less time. I tried to add a timer function to control the time of each tick, but it did not work. ``` this.force = d3.layout.force() .on("tick", setTimeout(tick(d), 50)); ``` I need help for this.