用于可视化图形的前 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 Graph

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

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

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

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

4. VivaGraphJS

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

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

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

5. 笔迹学

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

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

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

Sigma.js 是一个与笔迹学配合良好的独立库。它使您可以访问 WebGL 渲染器并帮助您创建交互式图形。

6. Cytoscape.js

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

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

桌面和移动设备上都有对标准手势的内置支持。它支持集合论运算，并包括 BFS 和 PageRank 等图论算法。您可以放心该库的质量，因为它被 Amazon 和 Google 等大公司以及政府组织使用。

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

7.乔木

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

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

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

8.力图

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

有很多方法可用于控制节点和链接的样式。您还可以使用一系列方法来控制图形的不同元素的呈现方式。

如果您想以 3D 方式渲染图表怎么办？幸运的是，该库还有一个 3D 版本，依赖 WebGL 和 Three.js 来处理渲染。图的底层物理由 D3 Force 3D 库或 ngraph 库负责。

最终想法

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

在这篇文章中，我们向您简要概述了一些最流行的 JavaScript 库，这些库可帮助您以图表的形式可视化信息。这些库之一可能会满足您的项目的需求。不过，您也可以在 GitHub 上搜索图形可视化库以获取更多选项。

由 OpenAI DALL-E 生成的帖子缩略图。

以上是用于可视化图形的前 8 个免费 JavaScript 库的详细内容。更多信息请关注PHP中文网其他相关文章！