antvis / X6

🚀 JavaScript diagramming library that uses SVG and HTML for rendering.
https://x6.antv.antgroup.com
MIT License
5.67k stars 1.69k forks source link

dag layout如何支持大小不同的节点的布局? #4000

Open SnowfungusWang opened 11 months ago

SnowfungusWang commented 11 months ago

Describe the bug

业务场景:在节点中存在parent node会包含其他节点,因此parent节点宽高不定。 问题:在parent节点已经调用fit修改size的情况下,再次调用dag布局,布局结果仍然认为parent节点的宽高为初始宽高(即普通节点宽高)

Your Example Website or App

https://codesandbox.io/embed/gifted-glade-8lfdrm?fontsize=14&hidenavigation=1&theme=dark

Steps to Reproduce the Bug or Issue

尝试方案:

  1. x6当前不支持对parent node的dag布局,因此尝试将节点的父子关系先解除,但保留父节点size,布局仍然和未解除时相同
  2. 尝试采用nodesepfunc和ranksepfunc,间距仍然没有改变。且在线上example中尝试修改节点大小和间距函数,但线上布局也存在重合等问题。(https://codesandbox.io/embed/gifted-glade-8lfdrm?fontsize=14&hidenavigation=1&theme=dark)

Expected behavior

期望:dag布局是否能对大小不同节点进行自动布局?如果不支持的话,有其他方案可以代替吗?

Screenshots or Videos

No response

Platform

Additional context

no others

NewByVector commented 10 months ago

dagre 布局是支持不同尺寸节点布局的。需要设置一下 nodeSize: [w, h] 属性。

SnowfungusWang commented 10 months ago

感谢回复,在sandbox的示例中,节点6设置了width和height,但是仍然可能存在遮挡问题~

image

另外想请教一下,如果存在childNode时,直接使用dag布局可以达到parentNode和其内部都能自动完成dag吗?

非常感谢!

SnowfungusWang commented 2 months ago

dagre 布局是支持不同尺寸节点布局的。需要设置一下 nodeSize: [w, h] 属性。

哈喽,感谢回复,时隔一年我再次尝试nodeSize属性,还是没有成功🤦‍♀️ 不管是在节点中添加nodeSize: [w, h] 还是nodeSize: {w, h}的布局结果都和未添加前相同。 请问一下相关文档可以在哪里找到呢?非常感谢!