antvis/G6

Do you want to work on this issue?

You can request for a bounty in order to promote it!

dagre布局的同层级节点问题 #5016

NollieLeo posted onGitHub

问题描述

基于dagre的布局搞出来的流程图,并且给每一个node都设置了layer image 但是这里出现了一个顺序问题 -- 当我给条件2节点添加后续节点的时候,条件1和条件2 节点原有的位置发生了改变 image 我也尝试着按照id设置每个层级node 的order的顺序,似乎有效果,只不过“followUp”这个节点的位置不对,应该是要跟随在条件2节点的后续。 image

重现链接

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

重现步骤

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

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

平台

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

屏幕截图或视频(可选)

No response

补充说明(可选)

No response


hi @NollieLeo, welcome!

posted by github-actions[bot] over 1 year ago

Hi @NollieLeo, Please star this repo if you find it useful! Thanks :star:! 你好 @NollieLeo。如果该仓库对你有用,可以 star 一下,感谢你的 :star:!

posted by github-actions[bot] over 1 year ago

给我一个在线 demo 我来调整看看呢

posted by Yanyan-Wang over 1 year ago

给我一个在线 demo 我来调整看看呢

稍等我给你搞个类似的~

posted by NollieLeo over 1 year ago

给我一个在线 demo 我来调整看看呢

采用reactflow做为ui,然后是dagre作为布局,可以看看hooks文件里头的useAutoLayout.ts以及mock里头的nodes和edges的数据 https://codesandbox.io/p/github/NollieLeo/flow-pro/main?file=%2Fsrc%2FApp.tsx%3A8%2C7

或者git 地址https://github.com/NollieLeo/flow-pro

posted by NollieLeo over 1 year ago

尝试只保留同层多个节点的 id 在 nodeOrder 中

nodeOrder: ['lmzu6uf3', 'lmzu6uf4']

posted by Yanyan-Wang over 1 year ago

尝试只保留同层多个节点的 id 在 nodeOrder 中

nodeOrder: ['lmzu6uf3', 'lmzu6uf4']

我尝试一下~感谢

posted by NollieLeo over 1 year ago

尝试只保留同层多个节点的 id 在 nodeOrder 中

nodeOrder: ['lmzu6uf3', 'lmzu6uf4']

尝试了一下,发现好像如果是没有嵌套的情况下,是正常的(如图,绿色的框起来的节点会放到nodeOrder中,顺序如图所示,红色标记节点不放到nodeOrder中) <img width="653" alt="image" src="https://github.com/antvis/G6/assets/37540279/d5f28f30-d155-46cc-9411-7b990411e61c"> 但是如果再嵌套一层的话,就会出现这样的情况 <img width="546" alt="image" src="https://github.com/antvis/G6/assets/37540279/ae777d17-b0ce-44d9-873d-110f14389cfd"> (nodeOrder顺序为[A,B,C,D],同理,只有绿色框中的节点才会放到nodeOrder中去) <img width="595" alt="image" src="https://github.com/antvis/G6/assets/37540279/4ccec65f-2550-4497-bbe8-f4935ad55c5d">

posted by NollieLeo over 1 year ago

哈喽~这里 @ @Yanyan-Wang 有没有啥头绪呢

posted by NollieLeo over 1 year ago

what if change TB to BT: useAutoLayout({ direction: "BT" });

Screenshot 2024-01-02 163753

posted by junyuan over 1 year ago

what if change TB to BT: useAutoLayout({ direction: "BT" });

Screenshot 2024-01-02 163753

sorry~it does not work

posted by NollieLeo over 1 year ago

Hey @NollieLeo, did you find any solution?

posted by novelnet about 1 year ago

有进展不

posted by millievn 10 months ago

Fund this Issue

$0.00
Funded
Only logged in users can fund an issue

Pull requests