CODEWITHSUNDEEP
javascriptd3.jscollision-detectionforce-layout
Jetson John
Jetson John

Reputation: 3829

How to remove the overlapping of circles in d3js?

I was trying to create a network graph using d3.js

While I increase the radius of circles it overlapped. How to avoid these overlapping.

I tried using collide function but it didn't worked out as expected 

    force.nodes(json.nodes).links(links).charge(-500)
        .linkDistance(function (d) {
            if (d.target.bublesize == 12) {
                return 80;
            } else if (d.target.bublesize == 18) {
                return 90;
            } else {
                return link_distance;
            }
        }).collide(.5)

   force.start();

jsFiddle, and screenshot, with visible overlapping:

enter image description here

Upvotes: 2

Views: 1378

Answers (1)

dorjeduck
dorjeduck

Reputation: 7794

Did you see

Collision Detection example by Mike Bostock

it works also with the latest version of d3.js ...

Upvotes: 2

Related Questions