用于显示直接非循环图（DAG）的JS库 [英] JS library for displaying direct acyclic graphs (DAGs)

问题描述

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

I am trying to make a browser-based tool that lets you inspect dependency graphs as they appear in module systems of programming languages and Makefiles.

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

I am looking for a visualization framework that does the drawing for me.

要求是工具包可以

• 标签节点（希望是边缘）


• 假设我有无限空间（滚动），自动将图形空间分隔到合适的尺寸（我不必猜测好尺寸）条形图很好）


• 很好地布局图形以使它看起来不那么混乱


• 和< = 5000节点


• 仅使用JS运行（没有Flash或桌面应用程序）

• label nodes (and hopefully edges)
• automatically space out the graph to the right size (I don't have to guess good dimensions) given that I have infinit space (scroll bars are fine)
• layout the graph nicely so that it doesn't look as messy
• be fine with <= 5000 nodes
• run with JS only (no Flash or desktop apps)

可选择如果它会很好可以很容易地移动节点并突出显示或隐藏图形的各个部分，以便更好地进行概述。

Optionally, it would be nice if it made it easy to move nodes around and highlight or hide parts of the graph for better overview.

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

It does not matter much what backed is used (SVG, canvas, all fine).

我看了很多到目前为止很少有图书馆（特别是来自 JavaScript中的图形可视化库），但未找到拟合一个：

I have looked at quite a few libraries so far (especially from Graph visualization library in JavaScript), but not found a fitting one yet:

• d3 很不错，但它提供的唯一节点图是力图，它专注于实时物理。加载后，您必须等待并观察物理引擎的稳定性。我不需要动画也不需要力量，并希望立即显示图表。


• GraphDracula 的示例几乎就是我要找的，但已经70个节点和400个边缘，绘图性能变得非常糟糕。它也很少有文档（35行代码示例）。

• d3 is nice but the only node-graph it delivers is a force graph, which is focused on real time physics. Once loaded, you have to wait and watch for the physics engine to stabilize. I don't need animations nor the Force, and want to show the graph right away.
• GraphDracula's examples are pretty much what I am looking for, but already with 70 nodes and 400 edges, the drawing performance becomes really bad. It also has very little documentation (being a 35 line code example).

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

Do you know something that meets my requirements? Thanks!

推荐答案

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

In a commercial scenario you might want to consider yFiles for HTML:

关于您的要求，它可以：

Regarding your requirements it can:

• 向节点和边添加任意数量的标签


• 提供几乎无限的滚动/平移/缩放区域


• 使用各种自动布局算法自动布局图形。对于依赖图， Hierarchic Layouter 非常适合


• 在具有大量节点的桌面浏览器上运行良好。根据视觉复杂性和图形结构，当今的浏览器实现可能难以实现5000个元素。


• 这是一个纯粹的Javascript库，没有任何依赖性


• 使用SVG作为主要后端，但也可以利用Canvas


• 该库是记录良好，鉴于其复杂性，这是必要的

• Add any number of labels to nodes and edges
• Provide virtually infinite scrolling/panning/zooming area
• Layout your graph automatically using a great variety of automatic layout algorithms. For dependency graphs, the Hierarchic Layouter is very well suited
• works nicely on desktop browsers with larger numbers of nodes. Depending on the visual complexity and graph structure, 5000 elements might proove difficult with todays browser implementations, though.
• It's a pure Javascript library with no dependencies whatsoever
• Uses SVG as the main backend, but can also leverage Canvas
• The library is well documented, which is necessary given its complexity

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

Here is a screenshot showing some of the above features in action - the layout was calculated automatically:

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

Disclaimer: I work for the company that creates the library. On SO/SE I do not represent my employer. This is my own post.

这篇关于用于显示直接非循环图（DAG）的JS库的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！