D3.js - 下载安装和开发环境配置

在本章中，我们将学习如何设置 D3.js 开发环境。在开始之前，我们需要以下组件 −

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

让我们逐一详细了解这些步骤。

D3.js 库

我们需要将 D3.js 库包含到您的 HTML 网页中，以便使用 D3.js 创建数据可视化。我们可以通过以下两种方式实现 −

• 从项目文件夹中包含 D3.js 库。
• 从 CDN(内容分发网络)包含 D3.js 库。

下载 D3.js 库

D3.js 是一个开源库，该库的源代码可在 https://d3js.org/ 网站上免费获取。访问 D3.js 网站并下载最新版本的 D3.js (d3.zip)。截至目前，最新版本为 4.6.0。

下载完成后，解压文件并查找 d3.min.js。这是 D3.js 源代码的压缩版本。复制 d3.min.js 文件并将其粘贴到项目的根文件夹或任何其他文件夹中，以便保留所有库文件。将 d3.min.js 文件包含在 HTML 页面中，如下所示。

示例 − 让我们考虑以下示例。

<!DOCTYPE html>
<html lang = "en">
   <head>
      <script src = "/path/to/d3.min.js"></script>
   </head>

   <body>
      <script>
         // write your d3 code here.. 
      </script>
   </body>
</html>

D3.js 是 JavaScript 代码，因此我们应将所有 D3 代码写在"script"标记内。我们可能需要操作现有的 DOM 元素，因此建议在"body"标记结束之前写 D3 代码。

从 CDN 包含 D3 库

我们可以通过将 D3.js 库从内容分发网络 (CDN) 直接链接到我们的 HTML 页面来使用它。CDN 是一个服务器网络，文件托管于其中，并根据用户的地理位置传递给用户。如果我们使用 CDN，则无需下载源代码。

使用 CDN URL https://d3js.org/d3.v4.min.js 将 D3.js 库包含到我们的页面中，如下所示。

示例 − 让我们考虑以下示例。

<!DOCTYPE html>
<html lang = "en">
   <head>
      <script src = "https://d3js.org/d3.v4.min.js"></script>
   </head>

   <body>
      <script>
         // write your d3 code here.. 
      </script>
   </body>
</html>

D3.js 编辑器

我们需要一个编辑器来开始编写代码。有一些很棒的 IDE(集成开发环境)支持 JavaScript，例如 −

• Visual Studio Code
• WebStorm
• Eclipse
• Sublime Text

这些 IDE 提供智能代码完成功能，并支持一些现代 JavaScript 框架。如果您没有花哨的 IDE，您可以随时使用记事本、VI 等基本编辑器。

Web 浏览器

D3.js 适用于除 IE8 及更低版本之外的所有浏览器。

Web 服务器

大多数浏览器直接从本地文件系统提供本地 HTML 文件。但是，在加载外部数据文件时存在某些限制。在本教程的后面几章中，我们将从外部文件(如 CSV 和 JSON)加载数据。因此，如果我们从一开始就设置好 Web 服务器，那么对我们来说会更容易。

您可以使用任何您熟悉的 Web 服务器(例如 IIS、Apache 等)。

查看您的页面

在大多数情况下，我们只需在 Web 浏览器中打开您的 HTML 文件即可查看。但是，在加载外部数据源时，运行本地 Web 服务器并从服务器 (http://localhost:8080) 查看您的页面更为可靠。