D3.js 库

D3.js 简介

Data-Driven Documents（数据驱动文档）或 D3.js 是 JavaScript 中的一个可用软件包，由 Mike Bostock 创建，用于使用 CSS、HTML、SVG 等进行可视化处理。对于复杂数据来说，这是最有用、适应性最强且功能非常强大的可视化工具。D3.js 库主要用于连接到 DOM（文档对象模型），然后对数据进行基于数据的驱动性更改。

为什么要使用 D3.js？

适应性： D3.js 不是一个图表库，而是一个数据可视化库，几乎可以生成您能想象到的任何可视化效果。开发者偏爱使用 D3.js 进行数据可视化的主要原因之一就是其灵活性。与其他具有预定义图表类型的库不同，D3.js 允许您根据特定需求创建独特的可视化效果。

数据绑定： D3.js 最强大的能力之一是能够轻松地将数据连接到 DOM 元素。这种数据绑定能力简化了以不同格式显示数据的过程。通过将数据绑定到 DOM，D3.js 允许您使用数据驱动的规则来更改文档，从而可以轻松地在不同数据状态之间进行更新和转换。

交互性： D3.js 在创建交互式可视化方面表现出色。交互式组件使消费者能够以更有意义的方式与数据互动。D3.js 提供了构建丰富、交互式数据体验所需的功能，例如将鼠标悬停在条形图的条形上以查看更多数据、缩放到地图的特定区域或在力导向图中控制节点。

整合性： D3.js 与包括 HTML、CSS 和 SVG 在内的 Web 标准完美配合。这确保了在所有平台和设备上的兼容性和可用性。D3.js 利用这些标准，使您能够使用常规方法来设置可视化样式和动画，从而轻松构建视觉上吸引人且性能出色的数据可视化。

使用 D3.js

环境设置： 在开始使用 D3.js 创建可视化之前，您必须首先建立一个基本的环境。此设置包括将 D3.js 集成到您的项目中，建立一个基本的 HTML 结构，并生成一个 JavaScript 文件来编写您的 D3.js 代码。为了在本地提供您的文件，您还需要一个 Web 服务器，可以使用诸如 Python 的 http.server 模块或 Node.js 等简单工具来设置。

步骤 1：在您的项目中包含 D3.js

您可以通过从官方网站下载 D3.js 或使用 CDN 链接到它来在项目中使用 D3.js。使用 CDN 通常是入门最直接的方法。要从 CDN 包含 D3.js，您可以在 HTML 文件中使用以下 script 标签。

步骤 2：创建一个简单的 HTML 结构

首先，定义一个简单的 HTML 文件结构。该文件将成为您 D3.js 可视化的基础。一个简单的 HTML 文件可能如下所示。

步骤 3：设置您的 JavaScript 文件

创建一个名为 app.js 的文件，您将在此文件中编写 D3.js 代码。该文件将包含构建和操作可视化所需的所有 JavaScript。请确保在您的 HTML 结构中链接到此文件，如上例所示。

1. 基础示例

示例 1：创建一个简单的条形图

条形图是学习 D3.js 的一个很好的起点。让我们用一些示例数据创建一个简单的条形图。

步骤 1： 设置您的数据

第一步是定义数据集。为了创建条形图，数据集包含一个数组，其值由条形的高度组成。

步骤 2： 设置 SVG 容器

创建一个 SVG 容器来存放图表。SVG 是可视化的主要画布点。在 app.js 文件中添加以下代码。

步骤 3： 创建条形

为条形图创建条形。这是重要的部分，我们使用上述数组数据来表示每个条形的高度，并将 SVG 容器附加或连接到矩形上。

完整代码

这是条形图的完整代码

代码

输出

示例 2：为条形图添加坐标轴

可以向条形图添加坐标轴以增强其信息价值。

步骤 1： 设置比例尺

定义 x 轴和 y 轴的比例尺。我们使用比例尺将数据值映射到屏幕坐标。下面对 y 轴使用线性比例尺，对 x 轴使用带状比例尺。

步骤 2： 添加坐标轴

将坐标轴添加到 SVG 容器中。D3.js 本身可以借助其自带的函数，根据我们给定的比例尺来渲染坐标轴。您可以在下面看到如何操作。

步骤 3： 更新条形以使用比例尺

更改条形以使用比例尺。更改涉及修改矩形的 x 和 y 属性，以便主要使用比例尺代替固定值。请参阅下文以了解如何更新条形以使用比例尺。

完整代码

这是带坐标轴的条形图的完整代码。

代码

输出

2. 中级示例

示例 3：创建一个折线图

折线图对于描述长期趋势很有用。让我们用 D3.js 创建一个折线图。

步骤 1： 设置您的数据

首先，定义您的数据集。为了准备折线图的数据集，我们可以使用一个对象数组，其中包含时间和其对应的值。看一个示例数据集。

步骤 2： 设置 SVG 容器

创建一个 SVG 容器来存放图表。这与上面的条形图相同，但尺寸已调整。

步骤 3： 设置比例尺和坐标轴

定义比例尺和坐标轴。对于 y 轴，我们使用线性比例尺，对于 x 轴，使用时间比例尺。

步骤 4： 创建折线

定义一个折线生成器并构建折线。此生成器函数用于将数据转换为路径字符串。

完整代码

这是折线图的完整代码

代码

输出

3. 高级示例

示例 2：创建一个散点图

散点图在可视化两个变量之间的关系时很有用。让我们用 D3.js 创建一个散点图。

步骤 1： 设置您的数据

首先，定义您的数据集。散点图需要一个数据点数组，其中包含代表一对值的对象。

步骤 2： 设置 SVG 容器

创建一个 SVG 容器来存放图表。

步骤 3： 设置比例尺和坐标轴

定义比例尺和坐标轴。在散点图中，我们将对 x 轴和 y 轴都使用线性比例尺。

步骤 4： 创建散点图

使用圆形来表示数据点。圆形的位置将取决于我们给定的数据集中的 x 和 y 值。

完整代码

这是散点图的完整代码

代码

输出

结论

D3.js 是一个成功的工具，用于为 Web 创建复杂的交互式数据可视化。理解数据绑定、比例尺和坐标轴的基础知识，可以帮助您生成多种图表。本指南介绍了 D3.js，并提供了从简单的条形图到更复杂的散点图的示例。随着您在 D3.js 方面的经验越来越丰富，您可以尝试使用日益复杂的可视化和交互方式，让您的数据焕发生机。