antvis / antvis/G6

dagre布局的同层级节点问题

Open
#5,016 14 comments 4 reactions 0 assignees View on GitHub
good first issue
Dominant language
TypeScript
Stars
12.3k
Forks
1.6k
PR merge metrics
No merged PRs in 30d

Description

### 问题描述

基于dagre的布局搞出来的流程图,并且给每一个node都设置了layer
![image](https://github.com/antvis/G6/assets/37540279/213f321a-8eb7-421f-8cfc-6f2bb5147d14)
但是这里出现了一个顺序问题 -- 当我给条件2节点添加后续节点的时候,条件1和条件2 节点原有的位置发生了改变
![image](https://github.com/antvis/G6/assets/37540279/c52d8315-6048-4c96-a94c-f6bab1ace692)
我也尝试着按照id设置每个层级node 的order的顺序,似乎有效果,只不过“followUp”这个节点的位置不对,应该是要跟随在条件2节点的后续。
![image](https://github.com/antvis/G6/assets/37540279/ba6a4a17-ff7e-4393-8cab-03c2b5c4871e)

### 重现链接

有个类似的issue地址https://github.com/dagrejs/dagre/issues/287

### 重现步骤

```ts
type Node = {
....
layer: number; // layer的顺序在图中画了~~
}

....
new DagreLayout({
nodesep: 40,
ranksep: 30,
align: undefined,
type: 'dagre',
rankdir: 'TB',
nodeOrder: map(
nodes.sort((pre, next) => (pre.data?.order || 0) - (next.data?.order || 0)),
({ id }) => id
), // 具体的order顺序可以参考问题描述里头画的
}),
```

### 预期行为

dagre布局会存在同层级节点下沉的情况
![image](https://github.com/antvis/G6/assets/37540279/855ec1f3-fd1e-4477-bfa5-11dd14b47b8c)

所以我希望如何让他不下沉或者在我设置了layer的情况下,如何有效的控制节点的顺序

### 平台

- 操作系统: [macOS, Windows, Linux, React Native ...]
- 网页浏览器: [Google Chrome, Safari, Firefox]
- G6 版本: [4.5.1 ... ]

### 屏幕截图或视频(可选)

_No response_

### 补充说明(可选)

_No response_

Contributor guide

No contributing guide indexed for this repository

Research direction

Start by reproducing the reported graph with DagreLayout, the shown layer/order configuration, and the linked dagre issue #287. Trace how same-layer ordering changes when a successor is added; done means preserving the intended layer order without moving condition1 or condition2 unexpectedly, while placing followUp after condition2.

Written by the indexing model from the issue text.

Assessment

Tech stack
typescript
Domain
data-visualization
Issue type
Bug
Difficulty
4/5
Estimated time
3-5 days
Activity status
Stale
Clarity
Needs clarification
Newbie friendliness
25/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.