D3.js - 安裝

Created: November-04, 2018

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

D3.js 庫
編輯
網頁瀏覽器
網路伺服器

讓我們逐一詳細介紹這些步驟。

D3.js 庫

我們需要將 D3.js 庫包含在 HTML 網頁中，以便使用 D3.js 建立資料視覺化。我們可以通過以下兩種方式實現 -

包含專案資料夾中的 D3.js 庫。
包括 CDN（內容分發網路）中的 D3.js 庫。

下載 D3.js Library

D3.js 是一個開源庫，該庫的原始碼可以在網站 https://d3js.org/ 網站上免費獲得。訪問 D3.js 網站並下載最新版本的 D3.js(d3.zip)。截至目前，最新版本為 5.7.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 編輯

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

Visual Studio Code
WebStorm
Eclipse
Sublime Text

這些 IDE 提供智慧程式碼完成以及支援一些現代 JavaScript 框架。如果你沒有花哨的 IDE，你可以隨時使用記事本，VI 等基本編輯器。

網頁瀏覽器

D3.js 適用於 IE8 及更低版本以外的所有瀏覽器。

網路伺服器

大多數瀏覽器直接從本地檔案系統提供本地 HTML 檔案。但是，在載入外部資料檔案時存在某些限制。在本教程的後面章節中，我們將從外部檔案（如 CSV 和 JSON） 載入資料。因此，如果我們從一開始就設定 Web 伺服器，對我們來說會更容易。

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

檢視你的頁面

在大多數情況下，我們只需在 Web 瀏覽器中開啟你的 HTML 檔案即可檢視。但是，在載入外部資料來源時，執行本地 Web 伺服器並從伺服器檢視頁面更為可靠 （http://localhost:8080） 。