How can I construct a tree using d3 and its force layout?

Question

I am trying to arrange my nodes in the form of a tree. For now, I am working off of this example from here. Currently, I am relying on a force directed layout but am trying to modify it such that I can obtain a tree with predetermined number of levels i.e. if a node belongs to a particular "Layer" it should belong to the same area as other nodes in the layer.

I have tried to explain more in the picture below but does anyone have any suggestions for this? Are there any predetermined algorithms inside d3 that do this or can be tweaked to achieve this?

Answer 1

Your diagram looks nearly identical to this example which uses a custom gravity force based on the depth. There's another example using a custom force which attracts to the parent node. These are both from my talk on force layouts.

Of course, force layouts are only one option—and as @nrabinowitz said there are many more hierarchy layouts. You can find more interactive hierarchy examples in my SVG Open talk.