dagre icon indicating copy to clipboard operation
dagre copied to clipboard

How to make nodes align from top when they are in parallel paths

Open xiaopow opened this issue 4 years ago • 7 comments

I managed to use Dagre to auto distribute the nodes, but when there is a path split, the nodes align to the bottom rather to the top. In the screenshot below, I want the "Path B" node to be ranked the same as "Path A". How can I achieve this?

Screenshot 2020-02-28 at 10 12 10 AM

My settings are

{
  rankdir: 'TB',
  ranker: 'network-simplex',
  marginx: 30,
  marginy: 30,
},

xiaopow avatar Feb 28 '20 02:02 xiaopow

Hi, have you made any progress on this issue?

brunaschneiders avatar Apr 23 '21 14:04 brunaschneiders

The only thing I've found that sort of works for this (but can cause other issues depending on the order of the edges) is adding the nodes at the top of the branch to the same parent.

Here is an example doing that in some places (not mine but it is how I found this): https://codesandbox.io/s/10l27o7kn4?file=/src/index.js

And a modified version with the top ones explicitly with a new parent (and the issues it can cause): https://codesandbox.io/s/dagre-d3-graph-forked-ylr15?file=/src/index.js

And a third showing how you can tweak the edge order to get different results: https://codesandbox.io/s/dagre-d3-graph-forked-59mxs?file=/src/index.js

collingreen avatar Jan 25 '22 22:01 collingreen

Faced similar issue where the intention is to aligned up node level from top to bottom or either left to right.

ZhengYuTay avatar May 26 '23 07:05 ZhengYuTay

I did a trick to achieve this:

  1. Change the direction to BT,
  2. Revert the src, dst of each connections.

junyuan avatar Jun 07 '23 02:06 junyuan

Faced similar issue

NollieLeo avatar Sep 22 '23 17:09 NollieLeo