D3.js 安装

我们将学习如何设置 D3.js 的开发环境。 在开始之前，我们需要一些组件。

• D3.js 的库
• 编辑器
• Web 浏览器 和
• Web 服务器

让我们详细介绍以上组件。

D3.js 的库

我们需要将 D3.js 的库添加到我们的 HTML 网页中，以应用 D3.js 创建数据可视化。 以下是我们可以实现它的两种基本方法

• 从我们的项目文件夹中添加 D3.js 的库。
• 从内容交付网络 (CDN) 添加 D3.js 的库。

D3.js 库下载

下载过程如下所示

• 它是一种开源类型的库，库的源代码位于 https://d3js.cn 链接。
• 我们可以进一步访问 D3.js 的网站，下载 D3.js 的当前版本 (d3.zip)。 D3.js 的当前版本是 5.16.0。
• 下载过程完成后，我们将不得不解压缩该文件并检查 d3.min.js。 它是 D3.js 源代码的缩小版本。
• 复制 d3.min.js 文件并将其粘贴到我们的项目根文件夹或其他文件夹中，我们希望将所有库文件保存到那里。
• 将 d3.min.js 文件添加到我们的 HTML 页面，如下所示。

让我们考虑一个例子。

示例

D3.js 是 JavaScript 的代码，因此我们必须在 "script" 标签内解释 D3 的每一段代码。 我们可能还需要使用现有的 DOM 元素。 因此，建议在 "body" 标签结束之前指定 D3 的代码。

注意：我们也可以使用 d3.js 官方网站上的在线编辑器。 在这个在线编辑器中，我们不必下载 d3.js 的库。 我们只需要访问 jsfiddle.net 链接并注册以有效地使用编辑器。 我们将在 D3.js 的后续章节中通过示例来理解它。

从 CDN 添加库

我们可以通过将其直接从 CDN (内容交付网络) 连接到 HTML 页面来应用 D3.js 库。 CDN 是服务器的网络，可以在其中托管多个文件并根据地理位置将其交付给任何用户。 当我们应用内容交付网络时，我们不需要下载源代码。

使用 CDN 链接 https://d3.js.org/d3.v4.min.js 在我们的页面内插入 D3.js 库。

例如，如下所示

示例

D3.js 编辑器

我们需要编辑器来开始编写我们的代码。 一些必要的 IDEs，即 集成开发环境，也可以支持 JavaScript，例如

• Sublime Text
• Eclipse
• WebStorm
• Visual Studio Code

这些上述 IDE 提供了智能代码补全，还帮助我们提供了一些最新的 JavaScript 框架。 当我们没有任何最新的 IDE 时，我们可以使用基本的传统编辑器，例如 VI 和记事本。

网页浏览器

数据驱动文档与除 较低版本 和 IE8 之外的每个浏览器兼容。

Web 服务器

大多数浏览器直接从任何本地文件系统提供本地 HTML 文件。 但是，如果涉及到加载任何外部数据文件，则存在一些限制。 在即将发布的 URL 中，我们将从外部文件（如 JSON 和 CSV）加载数据。 因此，当我们从一开始就设置 Web 服务器时，每个人都会更容易。

我们可以应用 Web 服务器，在那里我们将对 Apache、IIS 等感到满意。

可视化我们的页面

在各种情况下，我们可能只需在任何 浏览器 中打开 HTML 文件即可将其可视化。 如果我们加载任何外部数据源，则执行任何本地服务器会更可靠。 然后我们可以从服务器 (https://:8080) 轻松可视化我们的页面。