D3 是什麼？

D3（或 D3.js）是一個免費的開放原始碼 JavaScript 函式庫，用於資料視覺化。它基於網路標準的低階方法，在撰寫動態、資料驅動的圖形時提供了無與倫比的靈活性。十多年來，D3 一直推動著突破性和屢獲殊榮的視覺化，成為高級圖表函式庫的基本組成部分，並在全球培養了一個充滿活力的資料從業人員社群。

Information is Beautiful 2022 年時間考驗獎 評論道，D3「將該領域推向前所未有的成長、多元化和創造力」，並「改變了數百萬個資料視覺化在新聞編輯室、網站和個人作品集中的建立方式」。IEEE VIS 2021 年時間考驗獎 指出，「透過建立一個引人入勝且易於網路開發人員用來撰寫互動式視覺化的架構，作者們無可否認地幫助將資料視覺化帶入主流。[D3] 是對這個會議的基石貢獻，更廣泛地說，也是對我們整個領域成功的貢獻。」

D3 是由 Mike Bostock 於 2011 年建立的。Mike 與 Jeff Heer 和 Vadim Ogievetsky 在史丹佛大學合著了 D3 論文。Jason Davies 在 2011 年至 2013 年間對 D3 做出了重大貢獻，最值得注意的是對 D3 的地理投影系統做出的貢獻。Philippe Rivière 自 2016 年以來一直是 D3 及其文件的主要貢獻者。多年來，無數善良的人透過分享程式碼和想法、教學和回答問題，以及召集人們來促進視覺化實務，為 D3 做出了貢獻。Mike 和 Philippe 現在在 Observable 維護 D3 和 Observable Plot。

D3 是一個低階工具箱

D3 在傳統意義上並不是一個繪圖函式庫。它沒有「圖表」的概念。當你使用 D3 視覺化資料時，你會組合各種基本圖形。

若要製作一個 堆疊區域圖，你可以使用

• 一個 CSV 剖析器 來載入資料，
• 一個 時間比例尺 來設定水平位置 (x)，
• 一個 線性比例尺 來設定垂直位置 (y)，
• 一個 序數比例尺 和 分類方案 來設定顏色，
• 一個 堆疊配置 來排列數值，
• 一個 區域形狀 搭配一個 線性曲線 來產生 SVG 路徑資料，
• 座標軸 來記錄位置編碼，以及
• 選取 來建立 SVG 元素。

這需要花很多時間才能理解，對吧？但先深呼吸一下，你不需要一次學會所有東西。每個部分都可以獨立使用，因此你可以在組合它們之前個別學習。D3 不是一個單一的巨石，而是一組 30 個獨立的函式庫（或「模組」）。我們將這些模組組合在一起，目的是為了方便，而不是必要，這樣你就可以在反覆設計時輕鬆取得工具。

D3 工具箱裡有什麼？我們建議你瀏覽文件和範例，了解哪些與你相關。

提示

除非你需要 D3 的低階控制，否則我們建議你使用我們的高階姊妹函式庫：Observable Plot。在 D3 中，一個直方圖可能需要 50 行程式碼，但 Plot 可以用一行完成！Plot 簡潔但功能強大的 API 讓你更專注於分析和視覺化資料，而不是網頁開發。你甚至可以結合 Plot 和 D3，發揮兩者的優點。

D3 很靈活

由於 D3 沒有整體的「圖表」抽象化，因此即使是一個基本的圖表也可能需要幾十行程式碼。好處是，所有部分都擺在你面前，你可以完全控制發生的事情。你可以客製化視覺化，以達成你想要的效果。D3 沒有資料的預設呈現方式，只有你自己編寫的程式碼。（或從範例中複製。）

將 D3 視為「自己動手做」的替代方案，而不是高階繪圖函式庫的替代方案。如果你不滿意其他工具，而且正在考慮使用 SVG 或 Canvas（甚至 WebGL）建立自己的圖表，你最好瀏覽一下 D3 的工具箱！這裡幾乎肯定有東西可以幫助你建立你夢想的圖表，而且不會限制你的創意。

D3 與網路協同運作

D3 沒有引入新的圖形表示法；相反地，您可以直接將 D3 與 SVG 和 Canvas 等網路標準搭配使用。

「D3」這個名稱是資料驅動文件的縮寫，其中文件指的是 文件物件模型 (DOM) 標準，用於表示網頁的內容。雖然 D3 的某些模組（例如 選取 和 轉場）會接觸 DOM，但其他模組（包括 比例尺 和 形狀）只會對資料進行運算。D3 也可以與 React、Vue 和 Svelte 等網路框架配對使用；請參閱 入門指南 以取得建議。

D3 採用網路標準帶來許多好處。例如，您可以使用外部樣式表來變更圖表的樣式（甚至可以回應媒體查詢，例如用於回應式圖表或深色模式）；您可以使用偵錯程式和元素檢查器來檢閱您的程式碼在做什麼；而 D3 的同步、命令式評估模型（呼叫 選取.attr 會立即變異 DOM）可以比具有複雜非同步執行時期的框架更容易偵錯。

D3 適用於客製化視覺化

D3 讓事情變得可行，但不一定容易；即使是應該很簡單的事情，也常常不是如此。套用 Amanda Cox 的話來說：「如果你認為為長條圖寫一百行程式碼是很正常的事，那就使用 D3 吧。」

如果您需要為您的客製化視覺化取得最大的表現力，您應該考慮使用 D3。對於紐約時報或The Pudding 等媒體組織來說，D3 很合理，因為單一圖表可能會被數百萬讀者看到，而且編輯團隊可以共同努力推進視覺傳播的最新技術。

另一方面，對於拼湊私人儀表板或一次性分析來說，D3 則是過於強大。不要被炫目的範例所誘惑：其中許多範例都需要大量的實作工作！如果您受到時間限制（誰沒有呢？），您很可能會使用 Observable Plot 產生更好的視覺化或分析。

D3 適用於動態視覺化

D3 最新穎的概念是它的 資料聯結：給定一組資料和一組 DOM 元素，資料聯結允許您對進入、更新和離開元素套用不同的運算。如果您只建立靜態圖表（不會動態化或回應使用者輸入的圖表），您可能會覺得這個概念不直觀甚至很奇怪，因為它不是必要的。

資料連接存在，以便您可以控制資料變更時確切發生的情況，並更新顯示以作為回應。這種直接控制允許極高效能的更新 — 您只觸及需要變更的元素和屬性，而無需對 DOM 進行差異化 — 以及狀態之間的平滑動畫過渡。D3 適用於動態、互動式視覺化。（在 2012 年的 “512 條通往白宮的道路” 中，按住選項鍵並按一下狀態切換按鈕，試試看。真的。）