dagre 布局如何实现图中节点位置 #4440

问题描述

官网例子修改节点数据如下：

const data = {
  nodes: [
    { id: "1", label: "1" },
    { id: "2", label: "2" },
    { id: "3", label: "3" },
    { id: "4", label: "4" },
    { id: "5", label: "5" },
  ],
  edges: [
    { source: "1", target: "2" },
    { source: "2", target: "3" },
    { source: "1", target: "4" },
    { source: "4", target: "5" },
    { source: "3", target: "5" },
  ],
};

得到的默认节点位置是： <img width="1202" alt="image" src="https://user-images.githubusercontent.com/11417330/232455445-3918c451-8b60-4a46-a86f-a177915189d3.png">

但实际希望的效果是： <img width="724" alt="image" src="https://user-images.githubusercontent.com/11417330/232455650-ee36a35e-318c-496f-aa4a-d60cba914c13.png">

重现链接

https://antv-g6.gitee.io/zh/examples/net/dagreFlow#lrDagreUL

重现步骤

1. 进入页面
2. 修改节点数据如上

预期行为

希望节点【2】和【4】在同一水平位置上，理由是两个节点都是【1】的直接子节点，属于同一 rank。

若要实现此效果，应如何调整参数呢？

谢谢～

平台

• 操作系统: macOS
• 网页浏览器: Google Chrome
• G6 版本: 4.3.2

屏幕截图或视频（可选）

No response

补充说明（可选）

其实效果更接近「紧凑树」，但因为树布局不能单独使用，因此考虑 dagre 布局算法。

使用https://github.com/dagrejs/dagre布局也会遇到这个问题。