D3.js
概述
D3.js 是一個低階 JavaScript 函式庫，透過將資料綁定至 DOM 元素，用於建置自訂、互動式的資料視覺化。它提供比例尺、座標軸、形狀產生器、地理投影、力模擬與階層佈局，讓開發者對視覺輸出擁有完整掌控，同時可透過計算出的比例尺與佈局與 React 整合。
使用說明
- 綁定資料時，使用
.data(dataset).join("element")（D3 v6+）來實現 enter/update/exit 模式，並透過存取器函數設定屬性與樣式。 - 建立比例尺時，選擇適當類型（連續型用
scaleLinear、類別長條圖用scaleBand、日期用scaleTime、顏色對映用scaleOrdinal），並務必使用d3.extent()從資料設定定義域。 - 建立座標軸時，使用
d3.axisBottom(scale)或d3.axisLeft(scale)產生，用d3.format()配置刻度與標籤格式，並在視窗大小變更時重新產生。 - 建立圖表類型時，使用形狀產生器（
d3.line()、d3.area()、d3.arc()、d3.pie()、d3.stack()）與佈局函數（d3.treemap()、d3.forceSimulation()、d3.geoPath()）來處理複雜視覺化。 - 加入互動性時，使用轉場（
.transition().duration(750)）實現平滑資料更新，懸停時顯示工具提示，並支援拖曳/縮放以進行探索。 - 與 React 整合時，讓 D3 處理數學計算（比例尺、佈局、資料轉換），React 處理 DOM 渲染；在
useMemo中計算數值，並使用useEffect搭配 ref 進行 D3 驅動的動畫。
範例
範例 1：建置包含多種圖表類型的即時儀表板
使用者需求：「從 API 資料建立包含折線圖、長條圖與圓餅圖的儀表板」
步驟：
- 使用
d3.scaleTime()設定共享的 X 軸比例尺，用d3.scaleLinear()設定 Y 軸比例尺 - 使用
d3.line()搭配平滑曲線插值與區域填色建立折線圖 - 使用
d3.scaleBand()配合交錯的進入轉場建立分組長條圖 - 使用
d3.pie()與d3.arc()建立甜甜圈圖，並加入懸停工具提示
產出： 一個響應式儀表板，內含動畫圖表，能在資料變更時平滑更新。
範例 2：建立力導向網路圖
使用者需求：「將實體間的關係視覺化為互動式網路圖」
步驟：
- 設定
d3.forceSimulation()，包含forceManyBody、forceLink與forceCenter - 使用
d3.scaleOrdinal()以類別區分顏色，將節點渲染為圓形 - 使用
d3.drag()加入拖曳互動，重新定位節點 - 使用
d3.zoom()實現縮放與平移，並在懸停時顯示工具提示
產出： 一個互動式力導向圖，節點可拖曳、類別以顏色區分，並支援縮放導覽。
指導方針
- 在 React 應用中，使用 D3 處理比例尺、佈局與資料處理；讓 React 負責 DOM 渲染。
- 使用
.join()取代手動 enter/update/exit，以簡化資料綁定。 - 務必從資料（
d3.extent()）設定比例尺的定義域，而非硬編碼數值範圍。 - 使用
d3.format()格式化座標軸標籤與工具提示：千位數用",.0f"，貨幣用"$.2f"。 - 加入 750 毫秒的轉場，搭配
easeCubicInOut，以實現平滑的資料更新動畫。 - 透過
ResizeObserver回呼重新計算比例尺，使視覺化具備響應式。 - 為 SVG 元素加上
aria-label屬性與有意義的<title>標籤，以提升無障礙性。