使用 d3 自动布局的图形（具有多个父节点的树）

Posted 2023-03-31

【中文标题】使用 d3 自动布局的图形（具有多个父节点的树）

【英文标题】：Graph with auto layout using d3 (a tree with multiple parent nodes)

【发布时间】：2014-04-02 16:24:26

【问题描述】：

如何使用 d3 绘制具有自动布局、多对多且线条不与框交叉的图形？

我想完成这样的事情： http://www.graphdracula.net/showcase/ http://live.yworks.com/yfiles-for-html/1.1/demos/DataBinding/demo.yfiles.binding.interactivegraphsource/index.html

我想这是对我需要的最好的描述（类似于树，但有多个父母）：

【问题讨论】：

D3 没有为此实现布局。

【参考方案1】：

Dagre-d3 是我发现的最佳解决方案：

https://github.com/cpettitt/dagre-d3

【讨论】：

此库已弃用。有替代品吗？

【参考方案2】：

对于遇到此问题的其他人，这是另一种可能的解决方案：（请参阅“具有向下指向边的有向图”示例）

http://marvl.infotech.monash.edu/webcola/

它也可以插入到 d3.js 中并用于代替强制布局。

【讨论】：

同意，但请注意WebCola Missing documentation

【参考方案3】：

为了尽量减少线交叉，您可能需要分层的有向图布局。只需在谷歌上搜索该短语即可。

【讨论】：

如上所述，Dagre-d3 是最好的解决方案

@ElKopyto 此库已弃用。有替代品吗？