How to align children top position on the same level?

[ranjabi]

How to align children top position on the same level?

I'm currently using react flow with elkjs for the layouting as you can see below.

I tried to reproduce the equivalent in the ELKT editor below. The current layout is on the left side and the expected layout can seen on the right side of the image below. The nested nodes is represented by n2. The following contrains are required:

• nodes must be aligned on the same level on top position vertically (green dashed line)
• nodes must be positioned below of all the nodes on the previous level (red dashed line)
• nodes and its children must not takes spaces of its neighbor horizontally (blue dashed line)

Any node can be an average node or a nested node like n2 with varying children size.

Are these contrains can be achieved using elkjs? I already playing around but still not find the desirable config. Here my last config:

elk.algorithm: layered
elk.direction: DOWN
elk.spacing.nodeNode: 80
elk.hierarchyHandling: INCLUDE_CHILDREN
elk.layered.nodePlacement.strategy: NETWORK_SIMPLEX

Link to reproduce: ELKT

[Eddykasp]

The alignment property may help you (example).

[ranjabi]

The alignment property may help you (example).

Thank you it solved the first constraint, how about the third constraint where the nodes and its following children must not takes up its neighbors spaces horizontally?

[Eddykasp]

It sounds like you want an uncompacted tree layout. This is quite contrary to most typical aesthetics requirements and I don't think there is currently any way to produce such results directly in ELK. If you really insist that you want this you could add further children below n6 in your example so that you fill the tree and force the subtrees to separate that way. In your rendering you could then make the "dummy" nodes and edges invisible. Somewhat like this example.

[soerendomroes]

@ranjabi You can set a compaction strategy as seen here.