Javascript 在web应用程序中绘制有向无环图-唯一奇怪的方法可用吗？

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

一年多以来，我一直在寻找一个库/工具，该库/工具正在计算所需的布局，并绘制一个图形，该图形可以设置样式、缩放、可移动、交互式（例如，在鼠标上方突出显示儿童）

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

我试过了，它是——我非常喜欢它，但它有两个主要缺点：1）它不支持排名和聚类——这使得输出相当混乱；2）随着图形越来越大，它的性能变得不可接受

下一件看起来很有说服力的事情是，输出看起来非常好，而且绘制更大图形的速度相当快（并且允许一些性能调整）。但是它的标准布局（如cose或面包优先）不能产生我们所需要的输出

从我目前的观点来看，a有两个机会：

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

2） 使用[viz.js]（）（Graphviz的一个emscripted Javascript版本，同样在绘制图形时表现不佳）将结果计算为输出格式普通，然后再次使用此结果使用cytoscape.js绘制

现在我的问题是:

1） 你有没有其他办法来实现它

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

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

---

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

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

听起来您不满意dagre作为复合布局。这是有道理的，因为Dagre的作者没有实现对它的复合支持。Dagre与Cytoscape.js是分开的，但可以由它使用。你会注意到Dagre的作者已经声明他将不再使用自己的新特性更新库。因此，您的选择是：

（1） 使用另一个Cytoscape.js布局，它实际上是为复合节点设计的，比如CoSE或Cola

（2） 为Cytoscape.js编写自己的布局，以满足您的需要：

（3） 调整Dagre以识别复合节点并向作者发出拉取请求：然后可以更新Dagre的Cytoscape.js布局，以使用您添加的新Dagre API

---

目前，复合图布局是一个开放的研究领域——因此在任何库中都很难找到支持它们的布局。Cytoscape.js有一些复合的支持布局，如果您想要不同的行为，您可以自由地使用它们。还要注意的是，2.5分支的CoSE2采用了改进的算法。

谢谢，但由于dagre仍然不完全支持排名，并且根据cytoscape的文档，与dagre的化合物/簇仍然是一个悬而未决的问题，这对我来说并不完全可行，但谢谢！出于好奇，你最终打算做什么？@user3743222：对我来说仍然是一个开放的话题，我目前正在使用vis.js网络，但仍然不是我想要的。@LBA你能想出如何实现这一点吗？我正在寻找一个类似用例的解决方案。@Chandu，对不起，这个问题对meI仍然是开放的和有效的。我还没有找到一个解决方案来呈现（定向）带簇的图形以及Graphviz。我正在使用。Graphviz很棒，但我更喜欢JavaScript友好的源代码格式（这是一个笨拙的术语，但如果有人问我，我可以清楚地表达我的意思）。我也需要有向图中的复合节点。我正在Cytoscape中试验Cola布局，这看起来很有希望，但我目前仍然通过Graphviz（集群）的（JavaScript端口）获得了最好的结果。