我们在性能、算法和组件等方面评估了8个不同的图形可视化软件包。

Cylynx- 6分钟阅读

图/网络可视化是数据可视化领域的一个子类别，在过去几年中越来越受欢迎。已经出现了一些新的用例，使用图来理解物联网、社交网络或交易数据。图形数据库生态系统的发展也使人们更好地理解了图形数据表示的好处。

作为Motif开发的一部分，我们评估了一系列网络可视化解决方案，以确定哪种工具最适合我们的使用情况。 Motif, our graph intelligence software的一部分，我们评估了一系列的网络可视化解决方案，看看哪种工具最适合我们的使用情况。在这篇文章中，我们记录了我们对Javascript图形可视化库状态的发现。这包括开源和付费库。我们希望这对希望将图形可视化整合到他们的应用中的产品所有者或开发者来说是一个有用的指南。

虽然图形可视化库经常被用于图解画，如UML图或思维导图，但这些领域并不在我们的关注范围之内。在这里，我们希望评估用于数据探索和调查的库。

为什么是Javascript？

还有许多其他的图形可视化库，包括流行的桌面应用程序，如Gephi或Cytoscape，以及与编程语言相结合的库，如igraph和networkx的可视化包。这些软件库对单个分析师来说是很好的，但很难集成到更大的产品中。

具有普遍的浏览器支持的Javascript是建立交互式网络应用程序的一个极具吸引力的解决方案。这些库可以很容易地被集成到一个更大的网络应用程序中，甚至可以作为一个桌面电子程序发布。虽然性能可能比本地操作系统的能力要差，但对于大多数数据可视化的需求来说，它们已经足够好了。

库名单

以下是我们入围评估的8家图书馆的名单。

D3Keylines / RegraphVis.jsSigma.js /Ogma / LinkuriousG6/GraphinNgraph/VivagraphReact-force-graph

评价领域

我们确定了我们有兴趣在不同产品之间进行比较的3个领域：性能/渲染引擎、可用的算法和开箱即用的组件。

渲染引擎

对性能影响最大的因素是底层框架使用的渲染引擎。Yworks，一个图表库SDK供应商，有一个不错的3种渲染方法的比较。使用2015年的macbook，SVG的性能在达到2k节点和2k边之前，顶多能提供可行的性能。Canvas的性能在5k节点和5k边缘时达到极限，而WebGL在10k节点和11k边缘之前是可用的。

虽然WebGL的性能更强，因为它利用了机器的GPU处理能力，但它也更难操作，这意味着在性能、易用性和能力之间往往会有一个权衡。

算法

这指的是允许用户执行图形操作的一组可用API。这可能包括布局选项、寻路算法或甚至网络检测算法。所有这些额外的功能将大大减少所需的开发时间。

组成部分

可以加快产品开发的开箱即用的组件。这可能包括一个时间条过滤器或一个最小地图，以帮助用户在画布上导航。

简要评价表

库

许可证

渲染引擎

算法

组成部分

D3

BSD

SVG/Canvas

低

低

Keylines

商业

Canvas/WebGL

高

中

Vis.js

MIT

Canvas

中

低

Sigma.js

MIT

Canvas/WebGL

中

低

Ogma

商业

Canvas/WebGL

高

低

G6

MIT

Canvas

高

高

Ngraph

MIT

WebGL

中

低

React-force-graph

MIT

WebGL

低

低

详细比较

在本节中，我们将详细介绍各个产品，以及我们对这些产品的一般经验（如适用）。

D3

D3是一个完整的数据可视化框架，是制作交互式柱状图、线形图、地理空间图和网络图的最流行选择之一。然而，要建立一个与keylines或G6的功能相匹配的图形可视化解决方案，需要大量的时间。

它包含其他辅助库，如 D3-force，但其他大部分基元必须由用户来实现。下面是一个例子 使用D3来可视化Les Mis图的例子。

还有其他包装库，如 react-vis-force和 react-d3-graph但前者已不再维护，后者仍有很大的空间来追赶其他库。

Keylines

Keylines及其React姐妹库Regraph是cambridge intelligence的商业产品，具有强大的可视化引擎，支持canvas和WebGL渲染。

在我们尝试过的所有库中，我们认为keylines是性能最强的，甚至可以和其他WebGL库相比较。它对大多数图形算法都有开箱即用的支持，有多种有用的布局，并带有时间条等组件，便于整合。

优点。

一流的性能时间条组件地理空间支持组合节点/按需要提供细节8种不同的布局

弊端。

价格与大多数库的json数据格式稍有不同

Vis.js

Vis-network是一个性能比较好的开源画布库。它对聚类、布局、简单的图形操作和事件有开箱即用的支持。作为我们最早尝试的库之一，我们认为它对于简单的图形可视化任务来说效果很好，但相对来说很难扩展和建立。

优点。

MIT许可证合理的性能（Canvas）。支持常见的节点/边缘风格选项支持用Gephi和DOT格式进行导入

弊端。

难以在现有选项之外进行定制有限的布局和算法

Sigma.js

这是另一个在网络可视化领域长期存在且受欢迎的库。虽然1.x版本已经很久没有更新了，但新版本sigma 2.0正在开发中，已经在2018年发布了测试版，目前仍在积极开发中。这个版本将图形数据结构与渲染层分开，后者现在由一个名为graphology的库管理，而渲染层则由sigma js处理。

不幸的是，这并没有太好的记录，我们现有的评估是基于Sigma.js 1.x的。

优点。

MIT许可证良好的性能（WebGL）。处理平行边缘、动画、不同解析器等的插件系统。可扩展的

弊端。

2.0版本的测试版有限的布局和算法难以与React（1.x）整合

Ogma

注意：本节是基于现有的文档，而不是基于实际的试用。Linkurious的Ogma是一个相对较新的商业可视化软件，它包含了许多显示、探索和建立交互式图形应用程序的功能。它是Linkurious软件使用的底层库，据说是从Sigma js分叉出来的，并得到进一步的维护和发展。

优点。

良好的性能（WebGL）。众多的算法筛选、分组的转换众多的造型选择地理空间支持

弊端。

商业产品没有时间栏

G6

G6和它的姐妹库Graphin是Ant Visualisation团队的产品。G6提供了基于画布的图形可视化框架，具有大量的算法和造型功能。 Graphin将其与React整合在一起，并提供了可用于该库的额外组件。

如果你想对一个小到中等规模的图形进行可视化，这两个库都应该包含足够的工具和能力，以帮助开发者快速建立起一个应用程序。

优点。

MIT许可证众多的算法适度的性能（Canvas）。众多的造型选择通过自定义形状、行为、互动和插件，可以轻松地进行扩展开箱即用的组件，如时间栏和最小地图有大量实例的良好文档

弊端。

文档的某些部分和Github上的大部分问题都是中文的。没有地理空间支持（目前）。打包的尺寸API迭代非常快

Ngraph

这些库的作者Andrei Kashcha拥有

numerous other libraries这些都是值得任何图形爱好者一看的。生态系统中的主要库是ngraph，图数据结构库，VivaGraph，在ngraph和其他算法包之上的一套有意见的图绘制模块。

他有许多例子说明如何在其他webGL渲染库中渲染ngraph，如PIXI.js和three.js。虽然这对开发者来说意味着潜在的大量灵活性，但也意味着需要大量的工作来建立必要的业务功能。

优点。

MIT许可证卓越的性能（WebGL）。3D!高度可定制一些算法支持开箱即用的组件，如时间栏和最小地图有大量实例的良好文档

弊端。

需要了解底层渲染库的知识简单的结点和边缘形状没有地理空间或时间栏功能

React-force-graph

这是一个图形可视化库的集合，包括一个2D画布库，一个基于WebGL three.js的3D库，甚至是一个基于VR的库。从演示来看，性能也很好，有一套相当全面的造型选项。一个限制是，它们都只支持开箱即用的强制布局，不支持时间序列或地理空间。

优点。

MIT许可证卓越的性能（WebGL）。3D!AR!一些造型选择

弊端。

只有力导向的布局简单的结点和边缘形状没有地理空间或时间栏功能

总结

在这篇文章中，我们比较了8个不同的图形可视化库以及它们的优点和缺点。显而易见，很难说任何解决方案是目前市场上最好的，这真的取决于一个人的预算、对javascript或WebGL的知识以及对其他算法和组件的需求。

我们最终决定在我们的产品中实施G6和Graphin，因为我们觉得它们在合理的性能、丰富的功能和高度的可定制性之间取得了良好的平衡。它也在积极开发中，并计划在未来支持WebGL渲染，所以这将使它在性能上与其他库相当。

如果我们是一个拥有大量现金的大型金融机构，并且不打算将产品商业化，那么Keylines将是一个有吸引力的选择，它拥有一流的库、文档和支持。对于一个探索网络可视化空间的业余爱好者来说，我肯定会尝试ngraph或react-force-graph，特别是如果不需要更详细的造型或事件管理的话。

我们仍然看到了使图形分析更容易的巨大空间，不仅是在前端应用方面，而且在与企业系统更广泛的整合方面，以及对共享和协作的更好支持方面。