CODEWITHSUNDEEP
javascriptd3.jsforce-layout
Seiyria
Seiyria

Reputation: 2132

d3.js - prevent "clustering" with parent / other groups in force-directed graph

I'm facing an issue right now where I'm trying to make a force-directed graph that's smart about how it clusters. Currently I'm getting the following, which as you can see, has a very broken layout in regards to readability. I would much prefer to have each child group cluster with itself, and repel sibling groups, so it's a bit easier to follow. Preferably, I'd also like these clusters to be equally distributed in a circle around the parent node so when there are a lot of nodes, they're at least more readable than they would otherwise be if they all clustered on one side of the parent.

I did a bit of research, and I would like something similar to this, but I'm not sure how I can apply that to my site. For reference, my site layout is based off of this force layout.

Upvotes: 1

Views: 1872

Answers (1)

Seiyria
Seiyria

Reputation: 2132

I ended up playing with the d3 force options a bit, and I came across this as a viable solution:

var force = d3.layout.force()
    .linkDistance(function(d) { 
        return d.target._children ? d.target._children.length * 30 : 
            d.target.children ? d.target.children.length * 30 :
            60;
    })
    .charge(-400)
    .gravity(0.05)
    .friction(0.45)
    .linkStrength(0.6)
    .size([width, height])
    .on("tick", tick);

gravity / friction / linkStrength are not necessary but make transitions overall smoother; having a very negative charge was the key component to solving my original problem.

Much thanks to @AmeliaBR for pointing me in the right direction!

Upvotes: 1

Related Questions