The d3 force layout central node positioning

Question

I have use the d3.js to visualize my data. And the result like this.

PIC_1

PIC_2

My question is how can I make the data present like PIC_1,the center point local in the fixed position,and the other points (children points) around the center point like a circle.

Now,when I refresh the page the data will reload in the brower and all the points' position will randomly change as well.

So which d3's api or tricks can be used to this purpose. :)

Answer 1

Take a look at this example:

link to jsfiddle

If you exampne the code, and play with layout, you'll see that the root node has special treatment that makes it always remain in the center of the graph (unless you drag it, but even that you can prevent if you want).

On initialization, its property fixed is set to true, so that d3 force layout simulation doesn't move it. Also, it is placed in the center of rectangle containing layout:

root.fixed = true;
root.x = width / 2;
root.y = height / 2;

You ofcourse need to change or add some code in order to integrate this feature to your example, but the core idea is really clear from the example I linked.

Hope this helps. Let me know if you have a question, need a clarification, etc.