Prevent node overlap in force directed graph

7
votes

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

enter image description here

enter image description here

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

1
javascriptd3.jsoverlapforce-layout
Collision detection? bl.ocks.org/mbostock/3231298 - Josh
@Josh I have put var q = d3.geom.quadtree(graph.nodes), i = 0, n = nodes.length; while (++i < n) q.visit(collide(graph.nodes[i])); to my graph but its still the same. - analyticalpicasso
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. - AmeliaBR
@AmeliaBR Thank you. It worked by increasing the charge. You can also provide your comment as answer so that I can accept it. So by that it will be beneficial to others. - analyticalpicasso

1 Answers

12
votes

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.