D3JS教程

D3.js 安装

在本章中,我们将学习如何设置 D3.js 开发环境。在开始之前,我们需要以下组件-
D3.js library Editor Web browser Web server
让我们一一详细介绍这些步骤。

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 文件并将其粘贴到项目的根文件夹或任何其他文件夹中,您希望在其中保留所有库文件。在 HTML 页面中包含 d3.min.js 文件,如下所示。
示例-让我们考虑以下示例。
<!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 元素,所以最好在结束之前编写 D3 代码"body"标签。

从 CDN 中包含 D3 库

我们可以通过将 D3.js 库直接链接到内容交付网络 (CDN) 的 HTML 页面来使用它。 CDN 是一个服务器网络,其中托管文件并根据用户的地理位置将其交付给用户。如果我们使用CDN,则不需要下载源代码。
使用 CDN URL 包含 D3.js 库 https://d3js .org/d3.v4.min.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 代码 网络风暴 日蚀 崇高的文字
这些 IDE 提供智能代码完成并支持一些现代 JavaScript 框架。如果你没有花哨的 IDE,你可以随时使用基本的编辑器,如记事本、VI 等。

网络浏览器

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

网络服务器

大多数浏览器直接从本地文件系统提供本地 HTML 文件。但是,在加载外部数据文件时存在某些限制。在本教程的后面几章中,我们将从外部文件(如 CSVJSON)加载数据。因此,如果我们从一开始就设置网络服务器,对我们来说会更容易。
您可以使用任何您熟悉的网络服务器-例如IIS、Apache 等

查看您的页面

在大多数情况下,我们只需在网络浏览器中打开您的 HTML 文件即可查看。但是,在加载外部数据源时,运行本地 Web 服务器并从服务器 (http://localhost:8080) 查看您的页面更为可靠。
昵称: 邮箱:
Copyright © 2022 立地货 All Rights Reserved.
备案号:京ICP备14037608号-4