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

• D3.js库
• 编辑
• 网页浏览器
• 网络服务器

让我们详细一步一步地进行操作。

D3.js库

我们需要在您的HTML网页中包含D3.js库，以便使用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文件，然后将其粘贴到项目的根文件夹或任何其他要保留所有库文件的文件夹中。如下所示，在您的HTML页面中包含d3.min.js文件。

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

D3.js是JavaScript代码，因此我们应将所有D3代码写入“ script”标签中。我们可能需要操纵现有的DOM元素，因此建议在“ body”标签末尾之前编写D3代码。

包括CDN中的D3库

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

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

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

D3.js编辑器

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

• Visual Studio程式码
• 网络风暴
• 蚀
• 崇高文字

这些IDE提供智能的代码完成功能，并支持某些现代JavaScript框架。如果您没有精美的IDE，则可以始终使用记事本，VI等基本编辑器。

网页浏览器

D3.js可在除IE8及更低版本之外的所有浏览器上运行。

网络服务器

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

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

查看您的页面

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