【译】Javascript图形/网络可视化库的比较

Mintnoii
2,508 阅读9分钟

image.png

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

作为我们的图形智能软件 Motif 开发的一部分，我们评估了一系列网络图形可视化解决方案，以确定哪个工具最适合我们的场景。在本文中，我们记录了关于 Javascript 图形可视化库状态的调研结果。既有开源的，也包括付费的。我们希望这对想要将图形可视化集成到他们的应用程序中的产品所有者或开发人员来讲是一份有用的指南。

虽然图形可视化库经常用于绘制 UML 图或思维导图，但这些领域不在我们的关注范围内。在这里，我们寻求从数据探索和研究方面对这些代码库进行评估。

为什么是 Javascript？

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

Javascript 在浏览器中的广泛支持使其成为构建交互式 web 应用程序极具吸引力的解决方案。这些库可以很容易地集成到更大的 web 应用程序中，甚至可以作为桌面应用程序发布。虽然性能可能不如本地操作系统的能力，但它们已经足够满足大多数数据可视化的需求了。

可视化库清单

以下是我们评选出的8个可视化库:

    1. D3
    1. Keylines / Regraph
    1. Vis.js
    1. Sigma.js / Graphology
    1. Ogma / Linkurious
    1. G6 / Graphin
    1. Ngraph / Vivagraph
    1. React-force-graph

评估部分

我们确定了3个感兴趣的部分对这些库进行了比较: 性能/渲染引擎、可用算法和开箱即用的组件。

渲染引擎

对性能影响最大的因素就是框架底层使用的渲染引擎。Yworks，是一个图形绘制库 SDK 提供商，它对 3 种渲染方法进行了很好的比较。使用 2015 年的 macbook, SVG 的方式在低于2千个节点和2千条边时性能表现不错。Canvas 性能在 5 千个节点和 5 千条边时达到极限，而 WebGL 在 1 万个节点和 1 万 1 千条边时仍然可用。

虽然 WebGL 充分利用了机器 GPU 的处理能力，性能更好，但它的开发工作也更麻烦，这意味着在性能、易用性和功能之间需要权衡。

算法

这里提到的算法是指允许用户执行图形操作的可用 api 集合。这可能包括可选的布局，寻径算法，甚至网络检测算法。这些额外的功能都可以显著减少开发所需要的时间。

组件

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

评估总结

image.png

详细比较

在本节中，我们将详细介绍各个产品以及使用它们的一般经验(如果适用的话)。

D3

image.png

D3 是一个成熟的数据可视化框架，是开发交互式条形图、折线图、地理空间图和网络图最流行的选择之一。然而，想利用它构建与 keylines 或 G6 功能相匹配的图形可视化解决方案所需的时间是巨大的。

它包含其他的辅助库，如 D3-force，但是大多数其他基础工具必须由用户实现。这是一个使用 D3 来可视化《悲惨世界》角色关系图的例子。

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

Keylines

image.png

Keylines 及其 React 库 Regraph 是剑桥分析公司的一款商业产品，它拥有一个强大的可视化引擎，支持 canvas 和 WebGL 渲染。

在我们尝试过的所有库中，我们认为 keylines 是性能最好的，即使与其他 WebGL 库相比也是如此。它提供了对大多数图形算法的开箱即用的支持，有多种有用的布局，并附带了一些组件，如时间条，以方便集成。

优点:

  • 同类中性能表现最佳
  • 时间栏组件
  • 地理空间支持
  • 按需组合节点/详情
  • 8种不同的布局

缺点:

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

Vis.js

image.png

Vis-network 是一个性能相对较好的开源绘图库。它对集群、布局、简单的图形操作和事件提供了开箱即用的支持。作为我们尝试的第一个库之一，我们认为它可以很好地用于简单的图形可视化任务，但相对来说很难扩展和构建。

优点:

  • MIT 协议
  • 不错的性能(Canvas)
  • 支持常见的节点/边缘样式选项
  • 支持导入 Gephi 和 DOT 格式

缺点:

  • 很难超越现有选项进行定制
  • 有限的布局和算法

Sigma.js

image.png

这是网络可视化领域中另一个存在很久且流行的库。尽管 1.x 版本已经很长时间没有更新，但新版本 sigma 2.0 仍在开发中，并在 2018 年发布 beta 版，并且仍在积极开发中。新版本将现在由graphology 库管理的图形数据结构与由 sigma.js 处理的渲染层分开。

不幸的是，这还没有得到很好的文档，我们现有的评估是基于 Sigma.js1.x 版本。

优点：

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

缺点：

  • Beta版本2.0
  • 有限的布局和算法
  • 难以与 React（1.x）集成

Ogma

注意:本节基于现有的文档，而不是基于实际的试验。Linkurious 开发的 Ogma 是一个相对较新的商业可视化软件，它包含了许多显示、探索和构建交互式图形应用程序的功能。它是 Linkurious 软件使用的底层库，被认为是 Sigma.js 的分支，并进一步维护和开发。

优点:

  • 良好的性能(WebGL)
  • 众多的算法
  • 过滤、分组转换
  • 许多样式选项
  • 地理空间支持 缺点:
  • 商业产品
  • 没有时间序列支持

G6

image.png

G6 及其衍生库 Graphin 是 Ant 可视化团队的产品。G6 提供了基于 canvas 的图形可视化框架，并提供了许多算法和样式化函数，而 Graphin 将其与 React 集成在一起，并提供了额外的组件，可以与库一起使用。

如果您希望可视化小到中等大小规模的图形，那么两个库都应该包含足够的工具和功能，以帮助开发人员快速构建应用程序。

优点:

  • MIT 协议
  • 众多的算法
  • 中等的性能表现(canvas)
  • 众多的样式选项
  • 通过自定义形状、行为、交互和插件的方式，非常易于扩展
  • 开箱即用的组件，比如时间栏和小地图
  • 有很多示例的优秀文档

缺点:

  • 部分文档和大部分 Github issues 都是中文的
  • 没有地理空间支持(目前)
  • 打包体积很大
  • API 迭代非常快

Ngraph

image.png

库的作者 Andrei Kashcha 还有许多其他库，对于任何图形爱好者来说都值得一看。生态系统中的最主要的是 ngraph，用于图形数据结构的库，VivaGraph，在ngraph 之上的一组图形绘制模块以及其他算法包。

他有许多示例，展示了如何在其他 WebGL 渲染库（如 PIXI.js 和 three.js）中渲染 ngraph。尽管这对于开发人员来说可能代表有很大的灵活性，但这也意味着要构建必要的业务功能需要进行大量的工作。

优点:

  • MIT协议
  • 优秀的性能(WebGL)
  • 3d !
  • 高度可定制
  • 一些算法支持
  • 开箱即用的组件，如时间栏和小地图
  • 有很多例子的优秀文档

缺点:

  • 需要底层渲染库的知识
  • 简陋的节点和边缘形状
  • 没有时间序列或地理空间支持

React-force-graph

image.png

这是一个图形可视化库的集合，其中包括 2D canvas 库，基于 3D WebGL,three.js 的库，甚至是基于 VR 的库。演示中还提供了相当全面的样式选项，性能看起来似乎也很出色。有一个局限性在于，它们都仅支持开箱即用的定向布局，而没有时间序列或地理空间支持。

优点：

  • MIT协议
  • 出色的性能（WebGL）
  • 3D！
  • AR！
  • 有一些样式选项

缺点：

  • 仅支持强制导向的布局
  • 简陋的节点和边缘形状
  • 没有时间序列或地理空间支持

结论

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

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

对于探索网络可视化空间的业余爱好者，我肯定会尝试使用ngraph或react-force-graph，尤其是在不需要更详细的样式或事件管理的情况下。

如果我们是一家拥有大量资金的大型金融机构，而且不打算将该产品商业化，那么 Keylines 将是一个很有吸引力的选择，因为它拥有一流的库、文档和支持。作为探索网络可视化领域的爱好者，我肯定会尝试ngraph 或 react-force-graph，特别是在不需要更详细的样式或事件管理的场景下。

我们看到不仅在前端应用程序方面，包括在与企业系统的更广泛的集成，以及对共享和协作的更好的支持这些方面，让图表分析变得更容易仍然还有巨大的空白。因此，我们正在构建 Motif 来填补这个空白，并使其成为图分析的商业智能工具。

avatar
文章
阅读
粉丝