Controlling nodes positions

[pmario26]

I'm currently working on a project that has been using Dagre for a long time. The lib is fantastic and always met the project needs until now but there is one new feature that i'm currently unable to implement.
I would like to know if in the current version of the lib is there any way i can control the position of nodes to keep them aligned.
For example:

I would like to keep some of the nodes in the graph above aligned like in the picture below:

I already tried using the clustering in the Dagre-D3, but the nodes inside the cluster are still scattered:

I think this would improve greatly the understanding of some graphs, even if it increased the number of crossing edges as a side effect.
Is there anyway i can achieve that with the current version of the lib ?
If not, how could i contribute changing the lib to achieve that ?

[gordonwoodhull]

This is the kind of thing that WebCola is really good at - in fact they have an alignment constraint for exactly this.

However, it's a completely different layout model and does not do directed graph drawing as well as dagre.

The Holy Grail of graph layout is to combine all the features of all the layouts but it's probably impossible. 😁

[ZCatherine]

hello，I have the same problem.Have you solved it?

[153957]

Could you change the rankdir to LR and then give nodes 1-8 the same rank, node 9 a lower rank, and node 10 a higher rank. And maybe give the edges linking adjacent nodes, e.g. node4-node5, higher weigths to give them priority over longer edges such as node4-node7.

[WilliamStone]

Hi,
I'm meeting the same problem. Could Dagre add API to allow manually specify certain node and edge's position first, and then the algorithm calculate other node/edge positions based on it?
In my thinking the positioning function have 2 types:

1. absolute positioning, which is directly specify one node's x/y value, or specify an edge's middle joint point (head and tail points are specified by node which the edge attaches to.
2. relative positioning, which is to specify one node's relative x/y value relative to another node.

In this way the user can have strong control over layouts, such as specifying node position in graph definition such as mermaid, or even drag&drop to fix certain node at ideal position and let the algorithm to calculate layout of other nodes based on it.

[XenjaSchaefer]

Is there any solution yet?

[shubinla]

Is there any solution yet?

[IflaMushtaq]

@pmario26
For the alignment of nodes you can try out nodeOrigin={[0.5, 0.5]} as a prop to reactflow itself.

For example:

<ReactFlow
nodes={nodes}
edges={edges}
onConnect={onConnect}
nodeOrigin={[0.5, 0.5]}
fitView

[dagadbm]

reviving this issue now that dagreJS is finally getting some love