Force directed graph: collision forces

There’s two types of forces in the d3-force module – preshipped forces and custom forces.

Preshipped forces have already been written for you. Custom forces you write yourself.

Here we’ll cover the preshipped force that handles collisions between nodes - forceCollide.

Using forceCollide will prevent your nodes from rolling right over each other. Its purpose is to stop nodes from overlapping.

forceCollide is designed for those many situations where you crave some order in your nodes.

By default this is a soft force - your nodes will still overlap a bit.

We can customise the parameters of this force to make it a strict force.

Ready? Let’s find out how to make your nodes tessellate.

Parameters Link to heading

forceCollide has three parameters.

radius Link to heading

The distance from the centre of each node that can’t be overlapped with any other node.  Set this to the radius of your nodes to get a tessellation effect.

Setting this parameter to less than the radius of your nodes will lead to node overlap.

Setting this parameter to a higher value than the radius of your nodes will lead to nodes having whitespace between them. For certain aesthetics this works quite well - such as the image at the top of this page.

strength Link to heading

Sets how strict you’d like the collision mechanism to be.

Set this to a number in the range of [0-1].

Higher numbers in this range enforce the collision force more strongly - they have less ’tolerance’ for node overlap.

A value of 0 doesn’t enforce the collision force at all – it’s as if it’s not there at all.

A value of 1 is the opposite – the collision force will be strictly enforced so that your nodes tessellate better.

Setting a strength value outside this range gives rise to an interesting “popping” effect, where the nodes are violently pushed away from each other.

From some initial testing, strength values around 2 lead to nodes that appear jittery until the simulation settles down. Higher strength values then gave rise to more violent effects.

You can also make this parameter negative for a different sort of popping effect.

iterations Link to heading

Sets the number of times to apply this force per tick.

Higher numbers increase the rigidity of your graph but will impact the performance.

If you really don’t want your nodes overlapping then play around with this parameter.

Hope you found that useful! Click here to view to the rest of the force directed graph series.