4

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

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

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

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

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

从我目前的角度来看,有两个机会:

1) 使用 dagre.js 创建布局并使用cytoscape.js绘制结果(布局:'preset',使用来自 dagre 布局的节点计算的 x 和 y)。但是这种方式不支持“化合物”/集群。

2) 使用[viz.js] ( https://github.com/mdaines/viz.js)(Graphviz的脚本化 Javascript 版本,在绘制图形方面表现不佳)将结果计算为普通的输出格式和再次使用此结果用cytoscape.js绘制它。

现在我的问题:

1)你有另一个想法如何实现它?

2)如果我的想法是正确的,你能给我任何关于如何理想地链接链条的提示吗?

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

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

4

2 回答 2

1

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

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

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

(3) 调整 Dagre 以识别复合节点并向作者提出拉取请求:https ://github.com/cpettitt/dagre 然后可以更新 Dagre 的 Cytoscape.js 布局以使用您添加的新 Dagre API。

目前,复合图形布局是一个开放的研究领域——因此您将很难在任何库中找到支持它们的许多布局。Cytoscape.js 有一些复合支持布局,如果你想要不同的行为,你可以自由地分叉它们。另请注意,2.5 分支的 CoSE2 具有改进的算法。

于 2015-08-31T17:22:12.847 回答
0

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

于 2015-08-27T15:49:25.613 回答