D3.js - 安裝

在本章中，我們將學習如何設定 D3.js 開發環境。在開始之前，我們需要以下元件：

D3.js 庫
編輯器
Web 瀏覽器
Web 伺服器

讓我們逐一詳細瞭解這些步驟。

D3.js 庫

為了使用 D3.js 建立資料視覺化，我們需要將 D3.js 庫包含到您的 HTML 網頁中。我們可以透過以下兩種方式實現：

從專案資料夾中包含 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 程式碼，因此我們應該在“script”標籤內編寫所有 D3 程式碼。我們可能需要操作現有的 DOM 元素，因此建議在“body”標籤結束之前編寫 D3 程式碼。

從 CDN 包含 D3 庫

我們可以透過從內容分發網路 (CDN) 直接將其連結到我們的 HTML 頁面中來使用 D3.js 庫。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 編輯器

我們將需要一個編輯器來開始編寫程式碼。有一些支援 JavaScript 的優秀 IDE（整合開發環境），例如：

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 伺服器並從伺服器(https://:8080)檢視頁面更為可靠。

列印頁面