D3.js - 概念

D3.js 是一個開源的 JavaScript 庫，用於：

文件物件模型 (DOM) 的資料驅動操作。
處理資料和形狀。
佈局線性、層次、網路和地理資料視覺化元素。
實現使用者介面 (UI) 狀態之間的平滑過渡。
實現有效的使用者互動。

Web 標準

在開始使用 D3.js 建立視覺化之前，我們需要熟悉 Web 標準。以下 Web 標準在 D3.js 中被大量使用。

超文字標記語言 (HTML)
文件物件模型 (DOM)
層疊樣式表 (CSS)
可縮放向量圖形 (SVG)
JavaScript

讓我們逐一詳細瞭解這些 Web 標準。

超文字標記語言 (HTML)

眾所周知，HTML 用於構建網頁內容。它儲存在副檔名為“.html”的文字檔案中。

示例 - 一個典型的簡易 HTML 示例如下所示

<!DOCTYPE html>
<html lang = "en">
   <head>
      <meta charset = "UTF-8">
      <title></title>
   </head>

   <body>
   </body>
</html>

文件物件模型 (DOM)

當瀏覽器載入 HTML 頁面時，它會被轉換為分層結構。HTML 中的每個標籤都會轉換為 DOM 中具有父子層次結構的元素/物件。這使得我們的 HTML 具有更邏輯的結構。一旦 DOM 形成，操作（新增/修改/刪除）頁面上的元素就變得更容易了。

讓我們使用以下 HTML 文件來了解 DOM：

<!DOCTYPE html>
<html lang = "en">
   <head>
      <title>My Document</title>
   </head>

   <body>
      <div>
         <h1>Greeting</h1>
         <p>Hello World!</p>
      </div>
   </body>
</html>

上述 HTML 文件的文件物件模型如下：

層疊樣式表 (CSS)

雖然 HTML 為網頁提供了結構，但 CSS 樣式使網頁看起來更美觀。CSS 是一種樣式表語言，用於描述用 HTML 或 XML（包括 SVG 或 XHTML 等 XML 方言）編寫的文件的呈現方式。CSS 描述了元素如何在網頁上呈現。

可縮放向量圖形 (SVG)

SVG 是一種在網頁上渲染影像的方法。SVG 不是直接的影像，而只是一種使用文字建立影像的方法。顧名思義，它是一種可縮放向量。它會根據瀏覽器的尺寸自動縮放，因此調整瀏覽器大小不會使影像變形。除 IE8 及以下版本外，所有瀏覽器都支援 SVG。資料視覺化是視覺表示，使用 SVG 透過 D3.js 呈現視覺化非常方便。

可以將 SVG 想象成一個畫布，我們可以在上面繪製不同的形狀。因此，首先，讓我們建立一個 SVG 標籤：

<svg width = "500" height = "500"></<svg>

SVG 的預設測量單位是畫素，因此我們不需要指定單位是畫素。現在，如果我們想繪製一個矩形，我們可以使用下面的程式碼繪製它：

<svg width = "500" height = "500">
   <rect x = "0" y = "0" width = "300" height = "200"></rect>
</svg>

我們可以在 SVG 中繪製其他形狀，例如：線、圓、橢圓、文字和路徑。

就像設定 HTML 元素的樣式一樣，設定 SVG 元素的樣式也很簡單。讓我們將矩形的背景顏色設定為黃色。為此，我們需要新增一個屬性“fill”並將值指定為黃色，如下所示：

<svg width = "500" height = "500">
   <rect x = "0" y = "0" width = "300" height = "200" fill = "yellow"></rect>
</svg>

JavaScript

JavaScript 是一種鬆散型別的客戶端指令碼語言，在使用者的瀏覽器中執行。JavaScript 與 HTML 元素（DOM 元素）互動以使 Web 使用者介面具有互動性。JavaScript 實現ECMAScript 標準，其中包括基於 ECMA-262 規範的核心功能以及其他並非基於 ECMAScript 標準的功能。JavaScript 知識是 D3.js 的先決條件。

列印頁面