【图形可视化库】8个最佳免费JavaScript图形可视化库

在处理大量数据时，您可能会遇到必须借助图形直观地表示数据的情况。

图是一种结构，相当于一组对象，其中一些对象对在某种意义上是“相关的”。它们基本上是用于对对象之间的成对关系进行建模的数学结构。（维基百科）

如果您自己实现所有内容，那么以图形的形式直观地表示数据将需要花费大量时间来编写处理图形结构的代码。在这篇文章中，我们创建了一些最好的免费JavaScript图形可视化库的列表，这些库将为您完成所有繁重的工作。

人们通常可以互换使用“图表”和“图表”这两个术语。如果您正在寻找最好的免费JavaScript图表库，而不是图形可视化库，我们还为您提供了一份列表。

1.D3.js

每当你做任何与图表或图形形式的任何类型的数据可视化相关的事情时，脑海中浮现的第一个库是D3.js。D3是数据驱动文档的缩写。它使用HTML、SVG和CSS的组合来创建数据的可视化表示。

该库基本上允许您将任意数据绑定到DOM。之后，可以根据这些数据创建所有类型的图表。该库使您可以访问用于选择元素的不同方法和函数。它还允许您根据给定的数据动态设置不同元素的属性值。

您可以访问D3图库来查看所有的可能性。它包含一组不同的图表，向您展示D3.js的功能。

需要记住的一件重要事情是，该库没有内置方法来帮助您通过调用单个方法直接创建任何条形图或图表。您必须自己实现该功能。然而，它附带了许多辅助功能，可以帮助您相对轻松地完成所有这些事情。

2.Neo4j

正如我前面提到的，D3.js是一个强大的库，用于创建各种图形和图表。然而，要创建任何类型的图形可视化，都需要做大量的工作。克服这一限制的一种方法是使用基于D3.js的辅助库，这些库为您完成了所有基本的繁重工作。

这种库的一个例子是Neo4j。它有几个有用的功能，例如与多种数据格式的兼容性、力模拟、双击回调以及基于节点类型的自定义节点颜色。您还可以在信息面板中显示有关不同节点及其相互关系的信息。

您可以缩放和平移图形。该库还具有自动拟合和关系自动定向功能。拖动节点会使其具有粘性，再次单击会使其恢复到初始的非粘性状态。

您还可以使用onNodeClick、onNodeDoubleClick、onNodeDragStart、onNodeDragEnd等选项为不同的事件提供回调。网站上的示例在每个双击事件上添加了一组附加到原始节点的新节点。

3.React D3图

React D3 Graph是另一个基于D3.js的图形生成库，允许您使用React创建交互式和可配置的图形。

该库附带了一个主图形组件，一旦您将所有相关数据传递给它，它将允许您构建实际的图形。您还可以选择性地提供配置信息，以及处理用户事件（如节点单击和链接单击）的回调函数。

请记住，这个库不是与React和D3.js预打包的。您必须单独安装这些库。这使您可以自由地独立选择库的单独版本，只要它们高于最低要求即可。

您可以为每个图形指定一组配置选项，例如使其具有方向性、聚焦缩放、在聚焦期间更改动画持续时间，或使用平移和缩放行为。您还可以禁用图形的任何与拖放相关的操作，或使图形完全静态。

4.VivaGraphJS

VivaGraphJS是一个无依赖关系的库，您可以使用它来渲染图形。该库是可扩展的，并支持多种渲染引擎和布局算法。您可以安装许多相关模块，以将所需的功能添加到图形中。这包括对基本事件、强制图形布局的支持，以及以JSON格式存储图形数据。

该库提供了许多自定义选项。您可以毫不费力地更改节点和链接的外观。同样，您可以完全控制布局算法和用于显示图形的介质。例如，您可以告诉库使用WebGL来渲染图形，而不是默认使用的SVG。

根据节点数量、连接边数量等因素，您在网页上渲染的任何图形都会有不同的结构。您可以使用springLength、springCoeff和gravity等一系列参数来调整物理特性，使渲染的图形看起来很棒。

5.Graphology

Graphology库是一个用JavaScript和TypeScript编写的健壮且多用途的包。该库的目的是增加对使用相同统一接口的多种类型图的支持。这允许您创建各种各样的图，可以是有向图、无向图或混合图。您还可以决定是允许自循环还是支持平行边等功能。

使用“图形学”创建的图形可以发出各种操作的事件，例如添加或删除节点以及添加或删除边。还有一些事件是由节点或边属性更新触发的。

您还可以在项目中包含许多标准帮助程序库，以获得额外的功能。这包括用于在画布上渲染的画布包或具有应用常见搜索算法（如Dijkstra算法）功能的最短路径包。

Sigma.js是一个单独的库，可以很好地与Graphology配合使用。它可以让你访问WebGL渲染器，并帮助你创建交互式图形。

6.Cytoscape.js

Cytoscape.js是另一个用于图论可视化和数据分析的强大库。您可以使用它来可视化各种关系数据，如社交网络连接或生物数据。该库附带一个图论模型和一个可选的渲染器，用于显示交互式图形。它是一个一体化的软件包，可以满足您的所有绘图需求。

该库经过高度优化，并提供了良好的浏览器支持。对浏览器的支持可以追溯到IE10，其中部分支持IE9。所有的现代浏览器都享有极好的支持。该库还支持使用选择器进行过滤和图形查询，并使用样式表将数据与表示分离。

台式机和移动设备都内置了对标准手势的支持。它支持集合论运算，包括BFS和PageRank等图论算法。你可以放心图书馆的质量，因为亚马逊、谷歌等大公司以及政府组织都在使用它。

您可以阅读Cytoscape.js文档来开始使用该库。

7.Arbor

Arbor是一个简单的图形可视化库，它是使用web Worker和jQuery库作为基础构建的。

与此列表中的其他一些库不同，Arbor并不旨在成为一个完整的一体化解决方案。它只是为图形组织提供了一种高效的、强制导向的布局算法以及其他抽象。

它还内置了对处理屏幕刷新事件的支持。这只是意味着网页上数据的呈现留给了开发人员。根据项目的需要，您可以自由使用画布、SVG或HTML元素来创建图形。

8. Force Graph

您可以使用 Force Graph库在HTML5画布上渲染力导向图。虽然该库使用HTML5画布进行渲染，但它依赖于D3force库来处理底层物理。支持在画布上缩放和平移。您还可以拖动节点，或收听节点及其链接的单击和悬停事件。

有很多方法可用于控制节点和链接的样式。您还可以使用一组方法来控制图形中不同元素的渲染方式。

如果要以3D方式渲染图形，该怎么办？幸运的是，该库还有一个3D版本，它依赖于WebGL和Three.js来处理渲染。图的基本物理由D3力3D库或ngraph库处理。

最后的想法

以图形形式可视化复杂数据可以帮助我们轻松理解不同实体之间的关系。图形将帮助您传达太大和复杂的数据，而这些数据仅凭文本信息无法轻松解释。

在这篇文章中，我们向您简要介绍了一些最流行的JavaScript库，这些库可以帮助您以图形的形式可视化信息。其中一个库可能会满足您的项目需求。但是，您也可以在GitHub上搜索图形可视化库以获得更多选项。

发布由OpenAI DALL-E生成的缩略图。