用于显示直接非循环图（DAG）的JS库

Question

我正在尝试创建一个基于浏览器的工具，让您检查依赖图，因为它们出现在编程语言和Makefile的模块系统中。

我正在寻找一个可视化框架，为我绘制图纸。

要求是工具包可以

• 标签节点（希望是边缘）
• 假设我有无限空间（滚动条很好），自动将图形分隔到正确的大小（我不必猜测好尺寸）
• 很好地布局图表，使其看起来不那么混乱
• 与＆lt; = 5000个节点
完好无损
• 仅使用JS运行（无Flash或桌面应用程序）

可选地，如果能够轻松移动节点并突出显示或隐藏图形的某些部分以便更好地进行概览，那将是很好的。

使用支持的内容并不重要（SVG，画布，一切都很好）。

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

• d3很不错，但它提供的唯一节点图是力图，它专注于实时物理。加载后，您必须等待并观察物理引擎的稳定性。我不需要动画也不需要Force，并希望立即显示图表。
• GraphDracula的examples几乎就是我要找的，但已有70个节点和400个边缘，绘图性能变得非常糟糕。它也很少documentation（35行代码示例）。

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

Answer 1

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

关于您的要求，它可以：

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

以下是显示上述部分功能的屏幕截图 - 布局是自动计算的：

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

Answer 2

Dagre适用于图形布局（水平/垂直对齐，标签等），并具有D3渲染器。

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

https://github.com/cpettitt/dagre