how to control the simulation speed of d3 force layout

Question

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.

Answer 1

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.

1. .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.
2. .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.