Force directed layout

Question

when i use THIS algorithm to calculate force directed layout of graph where from 1 node is 10 or more edges, calculation failed. I guess it's because calculated position is so much large and it's represented as "NaN".

Input data:

var g = new Graph("canvas", 960, 700 );
            g.createVertex("a");
            g.createVertex("a1");
            g.createVertex("a2");
            g.createVertex("a3");
            g.createVertex("a4");
            g.createVertex("a5");
            g.createVertex("a6");
            g.createVertex("a7");
            g.createVertex("a8");
            g.createVertex("a9");
            g.createVertex("a10");
            g.createVertex("a11");
            g.createVertex("a12");
            g.createVertex("a13");
            g.createVertex("a14");
            g.createVertex("a15");
            g.createVertex("a16");


            g.createEdge("a","a1");
            g.createEdge("a","a2");
            g.createEdge("a","a3");
            g.createEdge("a","a4");
            g.createEdge("a","a5");
            g.createEdge("a","a6");
            g.createEdge("a","a7");
            g.createEdge("a","a8");
            g.createEdge("a","a9");
            g.createEdge("a","a10");
            g.createEdge("a","a11");
            g.createEdge("a","a12");
            g.createEdge("a","a13");
            g.createEdge("a","a14");
            g.createEdge("a","a15");
            g.createEdge("a","a16");
            g.go();

When i use this data, sometimes is graph rendered without problems, but mostly it breaks.

Can someone help me to fix it? Thank you.

1729 1729 · Accepted Answer · 2016-03-03T18:58:11

In the link you provided, the third example has something like:

g.repulsion = g.repulsion / 8;
            g.spring_length = 1;

This apparently makes it more compact. Since, you want to spread out the graph, you should probably multiply like this:

g.repulsion = g.repulsion * 10;

Try different numbers to see if it works. In future, I would suggest to use something with better documentation like D3.js.

Force directed layout

1 Answers