Prevent node overlap in force directed graph

Question

I have build a force directed graph for the social network analysis.

The problem which I am facing is that nodes keeps on overlapping each other,

How can I prevent overlapping of node in force directed graph ?

Here is my code with dummy data

And following is the image for my force directed graph

How can I remove overlapping of these nodes ? and how can I keep atleast some distance between links so that links are properly visible ?

Solution

There are two approaches to avoiding overlap in a d3 force layout.

The first is to adjust the parameters of the force object, the most relevant of which is the "charge" parameter. Nodes with negative "charge" values push other nodes away (versus nodes with positive values pull other nodes closer), and you can increase the amount of charge to cause a greater push.

The default value for the "charge" is -30, so from there you can adjust it until you get an effect you want. There's no simple formula for determining the value you want, since it also depends on the other parameters and the amount of links in your graph.

If for any reason adjusting the charge doesn't work for you (for example, if you want the nodes to cluster close to each other -- not repel each other -- but still not overlap), then you can manually check for overlapping nodes, as in this Mike Bostock example suggested by Josh in the comments.

Comments

[Josh]

Collision detection? bl.ocks.org/mbostock/3231298

[AmeliaBR]

You could also simply increase the "charge" parameter on your force layout, and maybe make it a function of node type (so that the bigger icons push each other away more than the smaller ones do). However, given the number of links you have you're probably still going to have overlapping lines.