當(dāng)前內(nèi)容所在位置

• 第一部分 D3.js 基礎(chǔ)知識(shí)
  • 第一章 D3.js 簡(jiǎn)介（已完結(jié)）
    • 1.1 何為 D3.js？
    • 1.2 D3 生態(tài)系統(tǒng)——入門(mén)須知
    • 1.3 數(shù)據(jù)可視化最佳實(shí)踐（上）
    • 1.3 數(shù)據(jù)可視化最佳實(shí)踐（下）
    • 1.4 本章小結(jié)
  • 第二章 DOM 的操作方法（已完結(jié)）
    • 2.1 第一個(gè) D3 可視化圖表
    • 2.2 環(huán)境準(zhǔn)備
    • 2.3 用 D3 選中頁(yè)面元素
    • 2.4 向選擇集添加元素
    • 2.5 用 D3 設(shè)置與修改元素屬性
    • 2.6 用 D3 設(shè)置與修改元素樣式
    • 2.7 本章小結(jié)
  • 第三章 數(shù)據(jù)的處理 ??
    • 3.1 理解數(shù)據(jù)
    • 3.2 準(zhǔn)備數(shù)據(jù) ??
      • 3.2.1 將數(shù)據(jù)集加載到 D3 項(xiàng)目 ??
      • 3.2.2 格式化數(shù)據(jù) ??
      • 3.2.3 測(cè)量數(shù)據(jù)集 ??
    • 3.3 將數(shù)據(jù)綁定到 DOM 元素（精譯中 ?）
    • 3.4 讓數(shù)據(jù)適應(yīng)屏幕
    • 3.5 加注圖表標(biāo)簽
    • 3.6 本章小結(jié)

3.2 數(shù)據(jù)準(zhǔn)備 Preparing data

有了數(shù)據(jù)集，下一步就是用 D3 將其 加載 到項(xiàng)目中，如圖 3.8 中的步驟 2 所示。然后就是確保數(shù)據(jù)按正確的格式進(jìn)行處理，其間也可能需要對(duì)數(shù)據(jù)進(jìn)行多方位的測(cè)量。本節(jié)介紹的 D3 方法都是為了完成上述準(zhǔn)備工作，并為示例條形圖的創(chuàng)建提供有效數(shù)據(jù)。

圖 3.8 D3 數(shù)據(jù)工作流的第二步即利用 D3 的數(shù)據(jù)獲取方法，將數(shù)據(jù)集加載到項(xiàng)目中

3.2.1 將數(shù)據(jù)集加載到 D3 項(xiàng)目 Loading a dataset into a D3 project

D3 提供了極為方便的工具函數(shù)來(lái)處理項(xiàng)目數(shù)據(jù)的加載。具體工具函數(shù)的選擇，取決于當(dāng)前數(shù)據(jù)集的特定格式。例如，CSV 格式的數(shù)據(jù)集使用 d3.csv() 進(jìn)行加載，JSON 數(shù)據(jù)集則使用 d3.json()。這些函數(shù)的第一個(gè)參數(shù)均為該數(shù)據(jù)文件的路徑。此外，D3 還專(zhuān)門(mén)提供了用于加載文本甚至 XML 格式數(shù)據(jù)的工具函數(shù)。它們都分屬 d3-fetch 模塊（詳見(jiàn) https://d3js.org/d3-fetch）。

注意

本章代碼已放到 GitHub 倉(cāng)庫(kù)（詳見(jiàn) http://mng.bz/Y7Po）。各章節(jié)代碼都存放在代碼倉(cāng)庫(kù)相應(yīng)的文件夾下。在 3.2 開(kāi)頭的文件夾中可以看到本小節(jié)示例代碼，數(shù)字后跟章節(jié)主題，如 3.2-Preparing_data。各文件夾下都有一組子文件夾 start 與 end。若需從最基本的代碼開(kāi)始練習(xí)，請(qǐng)使用 start 文件夾。要是遇到困難，可以在 end 文件夾找到對(duì)應(yīng)的參考代碼。分章節(jié)練習(xí)時(shí)，建議一次只打開(kāi)一個(gè) start 或一個(gè) end 文件夾。如果用 Live Server 工具一次性打開(kāi)所有章節(jié)的文件并啟動(dòng)本地服務(wù)器，某些路徑可能無(wú)法正常工作，尤其是往項(xiàng)目中加載數(shù)據(jù)集時(shí)，需要特別注意。

下面再回到上一章介紹過(guò)的那個(gè)條形圖練習(xí)，將我們從《2021 年數(shù)據(jù)可視化行業(yè)狀態(tài)調(diào)查》中搜集的樣本數(shù)據(jù)集（詳見(jiàn) www.datavisualizationsociety.org/survey）加載到示例中。該數(shù)據(jù)集為 CSV 格式，位于 /data 文件夾下。數(shù)據(jù)集的具體內(nèi)容如代碼清單 3.1 所示。第一行為列標(biāo)題，technology 與 count 分別表示調(diào)查中涉及的數(shù)據(jù)可視化工具（即從 ArcGIS 到 P5）、以及選用該工具的從業(yè)者投票數(shù)。其中 D3.js 為 414 票，Python 為 530 票：

代碼清單 3.1 數(shù)據(jù)從業(yè)人員最常用的工具統(tǒng)計(jì)情況（data.csv）

technology,count
ArcGIS,147
D3.js,414
Angular,20
Datawrapper,171
Excel,1078
Flourish,198
ggplot2,435
Gephi,71
Google Data Studio,176
Highcharts,58
Illustrator,426
Java,29
Leaflet,134
Mapbox,167
kepler.gl,24
Observable,157
Plotly,223
Power BI,460
PowerPoint,681
Python,530
QGIS,193
Qlik,61
R,561
React,145
Tableau,852
Vega,48
Vue,51
Web Components,79
WebGL,65
Pen & paper,522
Physical materials,69
Canvas,121
P5/Processing,55

鑒于目標(biāo)數(shù)據(jù)集為 CSV 文件，因此選用 d3.csv() 進(jìn)行數(shù)據(jù)加載，并將文件路徑 "../data/data.csv" 作為第一參數(shù)。這里的雙句點(diǎn)符號(hào) .. 表示上一層目錄，即文件夾 /js 所在的項(xiàng)目根目錄。然后進(jìn)入 /data 文件夾，最終定位到數(shù)據(jù)文件 data.csv：

d3.csv("../data/data.csv");

這樣就完成了數(shù)據(jù)工作流中的第 2 步。接下來(lái)需要對(duì)數(shù)據(jù)做格式化處理并完成相關(guān)測(cè)量工作。在此之前，還要知道數(shù)據(jù)的訪問(wèn)方法。注意，這里的數(shù)據(jù)加載是一個(gè) 異步過(guò)程（asynchronous process），所涉及的異步操作，是指那些數(shù)據(jù)結(jié)果不會(huì)立即返回的數(shù)據(jù)請(qǐng)求。我們可以通過(guò)訪問(wèn) d3.csv() 的回調(diào)函數(shù)，或者 JavaScript 的 Promise 接口，確保數(shù)據(jù)在執(zhí)行相關(guān)操作前已加載完畢。

3.2.2 格式化數(shù)據(jù) Formatting a dataset

本節(jié)介紹 D3 處理數(shù)據(jù)格式的具體方法，對(duì)應(yīng)工作流中的第三步，如圖 3.9 所示：

圖 3.9 數(shù)據(jù)工作流的第三步，從數(shù)據(jù)格式化開(kāi)始，以便在構(gòu)建可視化時(shí)使用

d3.csv() 中的回調(diào)函數(shù)，又稱(chēng)為 行轉(zhuǎn)換函數(shù)（row conversion function），能夠逐行訪問(wèn)數(shù)據(jù)。在下面的代碼中，d3.csv() 的第一個(gè)參數(shù)為數(shù)據(jù)路徑，第二個(gè)參數(shù)即為回調(diào)函數(shù)。該函數(shù)將訪問(wèn)到的數(shù)據(jù)輸出到控制臺(tái)顯示。復(fù)制本段代碼到 main.js 并保存項(xiàng)目：

const svg = d3.select(".responsive-svg-container").append("svg").attr("viewBox", "0 0 1200 1600").style("border", "1px solid black");d3.csv("../data/data.csv", d => {console.log(d);
});

打開(kāi)瀏覽器檢查工具，轉(zhuǎn)到控制臺(tái)（即 Console）標(biāo)簽，將會(huì)看到如圖 3.10 所示的輸出結(jié)果。數(shù)據(jù)逐行記錄，每一行都是一個(gè)包含 technology 和 count 的 JavaScript 對(duì)象：

圖 3.10 獲取到數(shù)據(jù)后，由 d3.csv() 回調(diào)函數(shù)輸出到控制臺(tái)的部分?jǐn)?shù)據(jù)顯示情況

d3.csv("../data/data.csv", d => {return {technology: d.technology,count: +d.count};
});

這里的關(guān)鍵在于，回調(diào)函數(shù)中返回的這些鍵值對(duì)（key-value pairs），是數(shù)據(jù)集加載完畢后唯一可以訪問(wèn)的內(nèi)容。該策略可以有效過(guò)濾原始數(shù)據(jù)中的無(wú)關(guān)字段列。但如果需要保留的列過(guò)多，逐一返回目標(biāo)鍵值對(duì)可能稍顯冗余。這時(shí)可能需要跳過(guò)回調(diào)函數(shù)中的處理邏輯，待 D3 返回完整數(shù)據(jù)集后再統(tǒng)一進(jìn)行格式化。完整數(shù)據(jù)集的具體訪問(wèn)方法將在下一節(jié)進(jìn)行介紹。

3.2.3 測(cè)量數(shù)據(jù)集 Measuring a dataset

D3 數(shù)據(jù)工作流的第三步還可以包含一個(gè)可選操作，即數(shù)據(jù)測(cè)量，如圖 3.11 所示。盡管逐行讀取數(shù)據(jù)很實(shí)用，但有時(shí)也需要訪問(wèn)整個(gè)數(shù)據(jù)集。這就要用到 JavaScript 的期約接口 Promise 了。Promise 是異步操作的結(jié)果，并以對(duì)象的形式存在。例如函數(shù) d3.csv() 返回的對(duì)象。讀取 Promise 結(jié)果的一個(gè)簡(jiǎn)單方法是調(diào)用其 then() 方法。

圖 3.11 在第三步的第二小步，可以測(cè)量并探索數(shù)據(jù)

在以下代碼段中，工具函數(shù) d3.csv() 鏈?zhǔn)秸{(diào)用了 then() 方法。一旦數(shù)據(jù)加載完畢，Promise 即轉(zhuǎn)為 兌現(xiàn)（fulfilled） 狀態(tài)，完整數(shù)據(jù)集將在 then() 方法中的回調(diào)函數(shù)中備用。按如下代碼將該數(shù)據(jù)集一次性輸出到控制臺(tái)，并保存項(xiàng)目：

d3.csv("../data/data.csv", d => {return {technology: d.technology,count: +d.count};
}).then(data => {console.log(data);
});

在控制臺(tái)中，您會(huì)看到一個(gè)被轉(zhuǎn)換為對(duì)象數(shù)組的完整數(shù)據(jù)集，其中的每個(gè)對(duì)象對(duì)應(yīng) CSV 原始數(shù)據(jù)集中的某一行。此時(shí) D3 讓該數(shù)據(jù)集變?yōu)榭傻鷮?duì)象，對(duì)于后續(xù)可視化開(kāi)發(fā)非常有用。如圖 3.12 所示，還可以確認(rèn)計(jì)數(shù)值已正確轉(zhuǎn)為數(shù)字形式。查看數(shù)組最后一項(xiàng)，還能看到經(jīng)過(guò) D3 處理后的原始 CSV 數(shù)據(jù)的列標(biāo)題數(shù)組。盡管我們的條形圖小練習(xí)暫不需要，但它偶爾也可以派上用場(chǎng)。

圖 3.12 完整的數(shù)據(jù)集以對(duì)象數(shù)組的形式記錄在控制臺(tái)中

在數(shù)據(jù)工作流的第 3.a 步驟中，我們已經(jīng)完成了數(shù)據(jù)格式化的工作，此時(shí)仍然可以利用 D3 來(lái)探索并測(cè)量獲取到的數(shù)據(jù)。測(cè)量數(shù)據(jù)的特定維度有助于提前做好相關(guān)準(zhǔn)備工作。

雖然從何處開(kāi)始探索數(shù)據(jù)并沒(méi)有嚴(yán)格的規(guī)范，但從數(shù)據(jù)集 Promise 的 then() 方法切入不失為一個(gè)好思路。首先要考察數(shù)據(jù)集包含了多少種技術(shù)。這可以通過(guò)數(shù)組的 length 屬性直接查看。打印到控制臺(tái)，將得到結(jié)果 33。也就是說(shuō)，條形圖將包含 33 個(gè)矩形元素：

d3.csv("../data/data.csv", d => {...
}).then(data => {console.log(data.length);   // => 33（數(shù)據(jù)集包含的總行數(shù)）
});

此外，我們還想知道哪種技術(shù)最受歡迎，以及有多少?gòu)臉I(yè)人員在定期使用它；最熱門(mén)的有了，最冷門(mén)的情況又如何？這些指標(biāo)都可以通過(guò) d3.max() 和 d3.min() 函數(shù)獲得。如以下代碼段所示，這些函數(shù)都接受兩個(gè)參數(shù)：第一個(gè)參數(shù)是包含這些極值的可迭代對(duì)象（即數(shù)據(jù)集本身），由 Promise 提供；第二個(gè)參數(shù)是一個(gè) 訪問(wèn)器函數(shù)（accessor function），用于指定參與比較的健（本例中即為 count）。

若要在控制臺(tái)中分別輸出最大值和最小值，同樣可利用 Promise 的 then() 方法，分別得到結(jié)果 1078 和 20：

d3.max(data, d => d.count)      // => 1078
d3.min(data, d => d.count)      // => 20
d3.extent(data, d => d.count)   // => [20, 1078]

注意

還可以使用 d3.extent() 方法，它接受相同的參數(shù)并返回一個(gè)包含最小值和最大值的結(jié)果數(shù)組。

考察數(shù)據(jù)中的最大值與最小值有助于預(yù)判圖表中條形區(qū)域的長(zhǎng)度，并能預(yù)估最高值和最低值之間的差異對(duì)比是否易于在屏幕上渲染。

條形圖中的數(shù)據(jù)常按降序排列，這樣可讀性更強(qiáng)，觀眾看了也能一目了然，明確哪些技術(shù)使用頻率較高、哪些較低。JavaScript 的原生方法 sort() 可以輕松實(shí)現(xiàn)排序。它接受一個(gè) 比較函數(shù)（compare function） 作參數(shù)，如以下代碼所示。該函數(shù)用于比較兩個(gè)技術(shù)的 count 值，參數(shù) a 和參數(shù) b 分別表示參與比較的兩個(gè)技術(shù)對(duì)象。若 b 中的 count 值大于 a 中的，則 b 應(yīng)該排在 a 的前面，以此類(lèi)推：

data.sort((a, b) => b.count - a.count);

排序邏輯可以放到 then() 方法內(nèi)。如果打印到控制臺(tái)，會(huì)看到 Excel 位于技術(shù)列表的首位，計(jì)數(shù)為 1078；其次是 Tableau，計(jì)數(shù)值 852；Angular 則以 20 的最小計(jì)數(shù)值墊底，如圖 3.13 所示。

此外，d3-array 模塊（詳見(jiàn) https://d3js.org/d3-array）還包含大量用來(lái)測(cè)量及轉(zhuǎn)換數(shù)據(jù)的實(shí)用方法，本書(shū)后續(xù)將選取一部分進(jìn)行介紹。但 d3.max()、d3.min() 與 d3.extent() 函數(shù)應(yīng)該這當(dāng)中是最常用的。

圖 3.13 輸出到控制臺(tái)并按降序排列的數(shù)據(jù)集

完成了數(shù)據(jù)的加載、轉(zhuǎn)換與測(cè)量工作，接下來(lái)通常需要將數(shù)據(jù)集傳遞給另一個(gè)函數(shù)進(jìn)行處理。該函數(shù)負(fù)責(zé)可視化效果的構(gòu)建。如以下代碼段所示，可以看到此時(shí) main.js 中的內(nèi)容；注意觀察在 then() 方法的末尾，數(shù)據(jù)是怎樣傳遞給 createViz() 函數(shù)的。該函數(shù)的實(shí)現(xiàn)邏輯將在下一節(jié)進(jìn)行介紹。

代碼清單 3.2 數(shù)據(jù)的加載、轉(zhuǎn)換與測(cè)量邏輯（main.js）

const svg = d3.select(".responsive-svg-container").append("svg")  // 添加一個(gè) SVG 容器.attr("viewBox", "0 0 1200 1600")     .style("border", "1px solid black");  d3.csv("../data/data.csv", d => { // 加載數(shù)據(jù)集// 對(duì)數(shù)據(jù)進(jìn)行格式化處理return {technology: d.technology,  count: +d.count            };
}).then(data => {// 對(duì)數(shù)據(jù)集進(jìn)行測(cè)量console.log(data.length); // => 33console.log(d3.max(data, d => d.count)); // => 1078         console.log(d3.min(data, d => d.count)); // => 20          console.log(d3.extent(data, d => d.count)); // => [20, 1078]// 讓數(shù)據(jù)集按降序排列data.sort((a, b) => b.count - a.count);// 將數(shù)據(jù)集傳給另一個(gè)函數(shù)作進(jìn)一步處理createViz(data);
});// 構(gòu)建條形圖的處理函數(shù)
const createViz = (data) => {};

在結(jié)束本節(jié)內(nèi)容前，您可以參照?qǐng)D 3.14 中的內(nèi)容，簡(jiǎn)要回顧一下前面學(xué)過(guò)的數(shù)據(jù)加載、行轉(zhuǎn)換以及 Promise 等相關(guān)概念?？偨Y(jié)歸納如下：

1. 加載數(shù)據(jù)要用到 D3 的數(shù)據(jù)獲取函數(shù)（fetch function），如 d3.csv()。
2. 數(shù)據(jù)的格式化是在行轉(zhuǎn)換函數(shù)中進(jìn)行的。
3. 數(shù)據(jù)加載完畢后，可以通過(guò)鏈?zhǔn)秸{(diào)用 then() 方法來(lái)訪問(wèn)整個(gè)數(shù)據(jù)集。該方法也是探究數(shù)據(jù)及執(zhí)行其他數(shù)據(jù)操作的理想場(chǎng)所。
4. 將最終的數(shù)據(jù)傳遞給另一個(gè)函數(shù)，由該函數(shù)負(fù)責(zé)具體的可視化構(gòu)建。

圖 3.14 D3 中數(shù)據(jù)加載、轉(zhuǎn)換及測(cè)量的實(shí)現(xiàn)方法與位置示意圖