在 Web 应用程序中绘制有向无环图 - 只有奇怪的方法可用吗？

Question

我们目前正在构建一个Web 应用程序 (AngularJS)，它需要根据动态创建的数据绘制有向无环图（最多 1000 个节点，最多 10000 条边）。

一年多以来，我一直在寻找一个库/工具，它可以计算所需的布局并绘制可以设计样式、缩放和平移、交互式的图表（例如，在鼠标悬停时突出显示子项）。

Graphviz是产生最佳结果的工具，但它还没有真正准备好在网络服务器上使用（特别是因为我无法保证操作系统并且不想这样做）。

我尝试了dagre，它是d3 渲染- 我非常喜欢它，但它有两个主要缺点：1）它并不真正支持排名和聚类 - 这使得输出相当混乱；2）随着图形变得越来越大，其性能也会下降越来越令人无法接受。

接下来看起来真正令人信服的是cytoscape.js，因为输出看起来非常好，并且绘制更大的图形相当快（并允许进行一些性能调整）。但它的标准布局（例如 cose 或宽度优先）不会产生我们需要的输出。

从我目前的角度来看，有两个机会：

1) 使用dagre.js创建布局并使用cytoscape.js绘制结果（布局：“预设”，使用 dagre 布局中计算的节点 x 和 y）。但不支持这种方式的“化合物”/簇。

2）使用[viz.js]（https://github.com/mdaines/viz.js）（Graphviz的一个emscripted Javascript版本，在绘制图表时再次表现不佳）将结果计算为简单的输出格式和再次使用这个结果用cytoscape.js绘制它。

现在我的问题：

1）您还有其他想法如何实现它吗？

2）如果我的想法是正确的，你能给我一些关于如何理想地链接链条的提示吗？

（AngularJS -> REST 后端 -> JSON 到前端 -> 为 dagre 或 viz 重构 JSON -> 计算布局 -> 将结果输入到 cytoscape -> 在浏览器中渲染？！？）并且有机会在我的上进行布局计算Node.js 前端服务器而不是客户端本身（同样是由于性能）？

任何提示和想法都受到高度赞赏。

Answer 1

Cytoscape.js 可以使用 dagre 布局。您可以在 cytoscape 文档中查看更多信息，但您只需将节点和边添加到图中，然后运行 ​​dagre 布局即可。这样，您就不必根据单独 dagre.js 中的节点位置手动定位所有节点。