How can I build a tree using d3 and its power composition?

Question

I am trying to arrange my nodes in a tree. I am currently working on this example from here . Currently, I rely on a force-oriented layout, but try to change it in such a way that I can get a tree with a given number of levels, i.e. if a node belongs to a specific “layer”, it must belong to the same area as the other nodes in the layer.

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

Answer 1

Your chart looks almost identical to this example , which uses custom gravity based on depth. There is another example using a custom force that attracts the parent node. It’s like from my talk about power models.

Of course, power layouts are just one option, and as @nrabinowitz said, there are many more hierarchical layouts . You can find more interactive examples in the SVG dialog that opens.