用于显示直接无环图 (DAG) 的 JS 库

Posted 2023-05-08

【中文标题】用于显示直接无环图 (DAG) 的 JS 库

【英文标题】：JS library for displaying direct acyclic graphs (DAGs)

【发布时间】：2013-05-14 21:20:33

【问题描述】：

我正在尝试制作一个基于浏览器的工具，让您可以检查出现在编程语言和 Makefile 的模块系统中的依赖关系图。

我正在寻找一个可以为我绘图的可视化框架。

要求是工具包可以

标记节点（希望是边缘） 考虑到我有无限的空间（滚动条很好），自动将图形隔开到合适的大小（我不必猜测好的尺寸） 很好地布置图表，使其看起来不那么凌乱 仅使用 JS 运行（无 Flash 或桌面应用程序）

或者，如果它可以轻松移动节点并突出或隐藏图表的某些部分以获得更好的概览，那就太好了。

使用什么支持并不重要（SVG、画布，都可以）。

到目前为止，我已经查看了很多库（尤其是来自Graph visualization library in javascript），但还没有找到合适的库：

d3 很好，但它提供的唯一节点图是力图，它专注于实时物理。加载后，您必须等待物理引擎稳定下来。我不需要动画也不需要原力，我想立即显示图表。 GraphDracula 的 examples 几乎是我想要的，但是已经有了 70 个节点和 400 个边，绘图性能变得非常糟糕。它也很少有documentation（作为一个 35 行代码示例）。

你知道符合我要求的东西吗？谢谢！

【问题讨论】：

另见***.com/questions/7034/…

【参考方案1】：

在商业场景中您可能需要考虑yFiles for html：

根据您的要求，它可以：

为节点和边添加任意数量的标签 提供几乎无限的滚动/平移/缩放区域 使用多种自动布局算法自动布局图形。对于依赖图，Hierarchic Layouter 非常适合 在具有大量节点的桌面浏览器上运行良好。不过，根据视觉复杂性和图形结构，5000 个元素可能很难在当今的浏览器实现中实现。 它是一个纯 Javascript 库，没有任何依赖关系 使用 SVG 作为主要后端，但也可以利用 Canvas 库是well documented，鉴于其复杂性，这是必要的

这是一个屏幕截图，显示了上述一些功能的运行情况 - 布局是自动计算的：

免责声明：我为创建库的公司工作。在 SO/SE 上，我不代表我的雇主。这是我自己的帖子。

【参考方案2】：

Dagre 非常适合图形布局（水平/垂直对齐、标签等），并且具有 D3 渲染器。

https://github.com/cpettitt/dagre-d3（最后查看图片）

https://github.com/cpettitt/dagre

【讨论】：

cytoscape.js 也可以使用 dagre 布局库。见js.cytoscape.org/demos/e52c2fbc0b09edd6ec46