DC.js - D3.js 簡介

D3.js 是一個 JavaScript 庫，用於在瀏覽器中建立互動式視覺化。D3 庫允許我們在資料集的上下文中操作網頁元素。這些元素可以是 HTML、SVG 或 Canvas 元素，並且可以根據資料集的內容進行引入、刪除或編輯。它是一個用於操作 DOM 物件的庫。D3.js 可以成為資料探索的有價值的輔助工具。它使您可以控制資料的表示方式，並允許您新增資料互動性。

與其他庫相比，D3.js 是首屈一指的框架之一。這是因為；它適用於 Web 和資料視覺化，並且具有企業級水平。另一個原因是它具有極大的靈活性，使全球開發人員能夠建立許多高階圖表。此外，它在很大程度上擴充套件了其功能。

讓我們瞭解 D3.js 的基本概念，如下所示：

• 選擇
• 資料連線
• SVG
• 過渡
• 動畫
• D3.js API

讓我們詳細瞭解每個概念。

選擇

選擇是 D3.js 中的核心概念之一。它基於 CSS 選擇器概念。那些已經使用並瞭解 JQuery 的人可以很容易地理解選擇。它使我們能夠根據 CSS 選擇器選擇 DOM，然後提供修改或追加和刪除 DOM 元素的選項。

資料連線

資料連線是 D3.js 中的另一個重要概念。它與選擇一起工作，使我們能夠根據資料集（一系列數值）操作 HTML 文件。預設情況下，D3.js 在其方法中優先考慮資料集，並且資料集中每個專案都對應一個 HTML 元素。

SVG

SVG 代表**可縮放向量圖形**。SVG 是一種基於 XML 的向量圖形格式。它提供繪製不同形狀的選項，例如線條、矩形、圓形、橢圓形等。因此，使用 SVG 設計視覺化效果可以為您提供更多功能和靈活性。

變換

SVG 提供了轉換單個 SVG 形狀元素或一組 SVG 元素的選項。SVG 變換支援平移、縮放、旋轉和傾斜。

過渡

過渡是專案從一種狀態更改為另一種狀態的過程。D3.js 提供了一個 transition() 方法在 HTML 頁面中執行過渡。

動畫

D3.js 透過過渡支援動畫。動畫可以透過正確使用過渡來完成。過渡是關鍵幀動畫的一種有限形式，只有兩個關鍵幀：**開始**和**結束**。起始關鍵幀通常是 DOM 的當前狀態，結束關鍵幀是您指定的屬性、樣式和其他屬性集。過渡非常適合過渡到新檢視，而無需依賴起始檢視的複雜程式碼。

D3.js API

讓我們簡要了解一些重要的 D3.js API 方法。

集合 API

集合只是一個將多個元素組合成一個單元的物件。它也稱為容器。它包含物件、對映、集合和巢狀。

路徑 API

路徑用於繪製矩形、圓形、橢圓形、折線、多邊形、直線和曲線。SVG 路徑表示可以描邊、填充、用作剪裁路徑或所有三種組合的形狀輪廓。

軸 API

D3.js 提供了繪製軸的功能。軸由線條、刻度和標籤組成。軸使用比例尺，因此每個軸都需要賦予一個比例尺才能使用。

縮放 API

縮放有助於縮放內容。您可以使用點選和拖動方法專注於特定區域。

分隔符分隔值 API

分隔符是由一個或多個字元組成的序列，用於指定純文字或其他資料中獨立區域之間的邊界。欄位分隔符是逗號分隔值的序列。簡而言之，分隔符分隔值是逗號分隔值 (CSV) 或製表符分隔值 (TSV)。