安装

优质

小牛编辑

141浏览

2023-12-01

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

D3.js图书馆
Editor
网页浏览器
网络服务器

让我们逐一详细介绍这些步骤。

D3.js Library

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

包含项目文件夹中的D3.js库。
包括CDN（内容分发网络）中的D3.js库。

下载D3.js Library

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

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

Example - 让我们考虑以下示例。

<!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代码，所以我们应该在“script”标签内写下我们所有的D3代码。我们可能需要操作现有的DOM元素，因此建议在“body”标记结束之前编写D3代码。

包括CDN的D3库

我们可以通过将内容交付网络（CDN）直接链接到我们的HTML页面来使用D3.js库。 CDN是托管文件的服务器网络，并根据其地理位置提供给用户。如果我们使用CDN，我们不需要下载源代码。

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

Example - 让我们考虑以下示例。

<!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 Editor

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

Visual Studio代码
WebStorm
Eclipse
崇高文本

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

网页浏览器

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

网络服务器

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

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

查看您的页面

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