D3 How do I create a Star Layout for a force directed map?

Question

I can build a default force directed map and I can also construct a tree shaped map. But I have a requirement to build a star shaped network topology map. I am not sure how to go about doing this as I can't seem to find a guide to doing so. If anyone can point me in a direction or to some resource I would be greatly appreciative. Thanks.

The code I have used to render a tree topology looks like the following:


            var k = 6 * e.alpha;
            graph.links.forEach(function(d, i) {
              d.source.y -= k;
              d.target.y += k;
            });
            node.attr("cx", function(d) { return d.x; })
                .attr("cy", function(d) { return d.y; });
            link.attr("x1", function(d) { return d.source.x; })
                .attr("y1", function(d) { return d.source.y; })
                .attr("x2", function(d) { return d.target.x; })
                .attr("y2", function(d) { return d.target.y; });

Here is sort of what I am trying to render.

Star Topology

Can you share a picture of a graph drawn with this layout, and/or a description of how a graph with the needed layout was made before? — Will Angley
I edited the original maybe this will give you a better idea of what I am going for. — jetstreamin
It sounds like you would want a custom layout for this. The force layout is great if you don't have particular requirements for the final layout, which you do have in this case. — Lars Kotthoff

VividD VividD · Accepted Answer · 2014-05-25T16:42:42

Take a look at this example:

link to jsfiddle

enter image description here

If you examine the code, you'll see that the root node has special treatment that makes it always remain in the center of the graph. If you don't need or have such node you can "invent" it, and not display it, but still have it for the purpose of running force layout to get star-shaped arrangement of remaining nodes.

On initialization, root's 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, of course, need to change or add some code in order to change color of each circle to be dependent on some other property of particular, but the core layout idea is in the example I linked.

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

D3 How do I create a Star Layout for a force directed map?

1 Answers