时间戳

首页 > 解决方案 > Cytoscape.js 的性能和布局

performance - Cytoscape.js 的性能和布局

问题描述

我正在测试 Cytoscape.js 的渲染性能。

我的图表包含大约 5000 个节点和 5000 个没有 x、y 位置的边，使用 Cytoscape.js 的自动布局。但是使用欧拉布局扩展渲染所有节点和边后需要15秒以上，图形页面的浏览器会在接下来的操作中卡住一段时间或响应缓慢。如前所述，Cytoscape.js 受到浏览器性能的限制。我们从 java 服务器客户端加载 json 数据，并使用 for 循环加载数据，然后使用 layout.run() 运行自动布局。如何利用大数据提高性能？

x,y 位置的数据会提高性能，对吧？但是我们不知道如何在 Java 中循环 x,y 位置。能给我看看么？Cytoscape.js 中的布局是否有 java 插件？

标签： performancecytoscape.js

解决方案

Cytoscape.js 不可能用于实际的大数据（即 TB 或更多），因为它在浏览器中运行。即使对于像 5000 个节点和边缘这样的中等大小，15 秒对于 Cytoscape.js 来说也是正常的。

问题在于 JavaScript 在图形布局等任务中速度较慢，因为现代 CPU 具有越来越多的内核，并且 JavaScript 的并行实现（Web 工作者）对于具有许多短迭代步骤的算法具有过多的开销，其中所有线程的结果必须被集成。此外，据我所知，GPU 计算在 JavaScript 中更难完成。

这两个问题都可能在未来得到解决，而且 Cytoscape.js 的开发者 Max Franz 似乎非常积极和支持，所以如果 JavaScript 能够获得更好的并行化和 GPU 计算支持，我很肯定这会找到它的方式进入Cytoscape.js 很快。

现在你可以尝试一些解决方法：

  • 图表总是一样的吗？然后您可以预先计算布局并将其加载为预设布局。
  • 图表至少不经常改变吗？然后您可以缓存布局并仅在必要时重新计算它。

我不知道您所说的“在 Java 中循环 x,y 位置”是什么意思，您的意思是“在 JavaScript（！）库 Cytoscape.js 中加载预设布局”？如果是这样，请在此处进行解释：http: //js.cytoscape.org/#layouts/preset。具体来说，您定义 x 和 y 坐标，如：

let options = {
  name: 'preset',
  positions: ... // map of (node id) => (position obj); or function(node){ return somPos; }
...

还有一些图形可视化的功能比 Cytoscape.js 少，但速度更快，所以如果您不需要任何功能而只想可视化一个简单的图形，您可以尝试ngraph ，请参阅http:/上的演示/www.yasiv.com/graphs#Bai/rw5151。

推荐阅读