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

Drawing directed acyclic graphs in a web application - only strange approach available?

本文关键字：-只方法应用程序 web 绘制更新时间：2023-09-26

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

一年多以来，我一直在寻找一个库/工具，它正在计算所需的布局和绘制图形，可以进行样式设计，缩放和可平移，交互式(例如在鼠标上方突出显示儿童)。

Graphviz是产生最佳结果的工具，但它还没有真正准备好在web服务器上使用(特别是因为我不能保证操作系统，也不想)。

我尝试了dagre，它是d3渲染-我非常喜欢它，但它有两个主要缺点:1)它不真正支持排名和聚类-这使得输出相当混乱;2)随着图越来越大，它的性能变得不可接受。

下一个真正令人信服的东西是cytoscape.js，因为输出看起来非常好，它在绘制更大的图形时相当快(并允许一些性能调整)。但是它的标准布局(例如:close或breadthfirst)并不能产生我们所需要的输出。

从我目前的观点来看，我们有两个机会:

1)使用dagre.js创建布局，并使用cytoscape.js绘制结果(布局:'preset'，使用dagre布局中计算的节点x和y)。但是这种方式不支持"复合词"/簇。

2)使用[viz.js](https://github.com/mdaines/viz.js) (Graphviz的emscript Javascript版本，在绘制图形时再次表现不佳)将结果计算为输出格式，并再次使用此结果使用cytoscape.js绘制。

现在我的问题是:

你有其他的想法如何实现它吗?

2)如果我的想法是正确的，你能给我一些提示，如何理想地连接链条吗?

(AngularJS -> REST后端-> JSON到前端->重组JSON为dagre或viz ->计算布局->输入结果到cytoscape ->在浏览器中渲染?!?)，是否有机会在我的node.js前端服务器上进行布局计算，而不是客户端本身(再次由于性能)?

听起来您对Dagre的复合布局不满意。这是有道理的，因为Dagre的作者并没有实现对它的复合支持。Dagre是独立于Cytoscape.js的，但可以被它使用。您会注意到Dagre的作者已经声明他将不再使用自己的新特性更新库。因此，您的选项是:

(1)使用另一个实际上为复合节点设计的Cytoscape.js布局，如CoSE或Cola。

(2)为Cytoscape.js编写自己的布局，以满足您的需求:http://js.cytoscape.org/#extensions/layouts

(3)适应Dagre以识别复合节点并向作者发出pull请求:https://github.com/cpettitt/dagre然后可以更新Dagre的Cytoscape.js布局，以使用您添加的新Dagre api。

目前，复合图布局是一个开放的研究领域——所以你将很难在任何图书馆中找到许多支持它们的布局。js有一些复合支持布局，如果你想要不同的行为，你可以自由地fork它们。还需要注意的是，2.5分支具有改进算法的CoSE2。

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