當前位置：首頁 > news >正文

石家莊微信網站建設公司互聯網營銷師考證多少錢

news 2025/7/6 11:22:21

石家莊微信網站建設公司,互聯網營銷師考證多少錢,移動端網站和app開發(fā),設計圖ai生成當前內容所在位置第一部分 D3.js 基礎知識第一章 D3.js 簡介（已完結） 1.1 何為 D3.js？1.2 D3 生態(tài)系統(tǒng)——入門須知1.3 數據可視化最佳實踐（上）1.3 數據可視化最佳實踐（下）1.4 本章小結第二章…

當前內容所在位置

第一部分 D3.js 基礎知識
第一章 D3.js 簡介（已完結）
1.1 何為 D3.js？
1.2 D3 生態(tài)系統(tǒng)——入門須知
1.3 數據可視化最佳實踐（上）
1.3 數據可視化最佳實踐（下）
1.4 本章小結

第二章 DOM 的操作方法（已完結）
2.1 第一個 D3 可視化圖表
2.2 環(huán)境準備
2.3 用 D3 選中頁面元素
2.4 向選擇集添加元素
2.5 用 D3 設置與修改元素屬性
2.6 用 D3 設置與修改元素樣式
2.7 本章小結

第三章數據的處理 ??
3.1 理解數據
3.2 準備數據 ??
3.2.1 將數據集加載到 D3 項目 ??
3.2.2 格式化數據 ??
3.2.3 測量數據集 ??

3.3 將數據綁定到 DOM 元素（精譯中 ?）
3.4 讓數據適應屏幕
3.5 加注圖表標簽
3.6 本章小結

文章目錄

- 3.2 數據準備 Preparing data
- - 3.2.1 將數據集加載到 D3 項目 Loading a dataset into a D3 project
  - 3.2.2 格式化數據 Formatting a dataset
  - 3.2.3 測量數據集 Measuring a dataset

3.2 數據準備 Preparing data

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

圖 3.8 D3 數據工作流的第二步即利用 D3 的數據獲取方法，將數據集加載到項目中

圖 3.8 D3 數據工作流的第二步即利用 D3 的數據獲取方法，將數據集加載到項目中

3.2.1 將數據集加載到 D3 項目 Loading a dataset into a D3 project

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

注意

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

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

代碼清單 3.1 數據從業(yè)人員最常用的工具統(tǒng)計情況（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

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

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

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

3.2.2 格式化數據 Formatting a dataset

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

圖 3.9 數據工作流的第三步，從數據格式化開始，以便在構建可視化時使用

圖 3.9 數據工作流的第三步，從數據格式化開始，以便在構建可視化時使用

d3.csv() 中的回調函數，又稱為 行轉換函數（row conversion function），能夠逐行訪問數據。在下面的代碼中，d3.csv() 的第一個參數為數據路徑，第二個參數即為回調函數。該函數將訪問到的數據輸出到控制臺顯示。復制本段代碼到 main.js 并保存項目：

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);
});

打開瀏覽器檢查工具，轉到控制臺（即 Console）標簽，將會看到如圖 3.10 所示的輸出結果。數據逐行記錄，每一行都是一個包含 technology 和 count 的 JavaScript 對象：

圖 3.10 獲取到數據后，由 d3.csv() 回調函數輸出到控制臺的部分數據顯示情況

圖 3.10 獲取到數據后，由 d3.csv() 回調函數輸出到控制臺的部分數據顯示情況

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

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

3.2.3 測量數據集 Measuring a dataset

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

圖 3.11 在第三步的第二小步，可以測量并探索數據

圖 3.11 在第三步的第二小步，可以測量并探索數據

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

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

在控制臺中，您會看到一個被轉換為對象數組的完整數據集，其中的每個對象對應 CSV 原始數據集中的某一行。此時 D3 讓該數據集變?yōu)榭傻鷮ο?#xff0c;對于后續(xù)可視化開發(fā)非常有用。如圖 3.12 所示，還可以確認計數值已正確轉為數字形式。查看數組最后一項，還能看到經過 D3 處理后的原始 CSV 數據的列標題數組。盡管我們的條形圖小練習暫不需要，但它偶爾也可以派上用場。

圖 3.12 完整的數據集以對象數組的形式記錄在控制臺中

圖 3.12 完整的數據集以對象數組的形式記錄在控制臺中

在數據工作流的第 3.a 步驟中，我們已經完成了數據格式化的工作，此時仍然可以利用 D3 來探索并測量獲取到的數據。測量數據的特定維度有助于提前做好相關準備工作。

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

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

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

若要在控制臺中分別輸出最大值和最小值，同樣可利用 Promise 的 then() 方法，分別得到結果 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() 方法，它接受相同的參數并返回一個包含最小值和最大值的結果數組。

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

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

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

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

此外，d3-array 模塊（詳見 https://d3js.org/d3-array）還包含大量用來測量及轉換數據的實用方法，本書后續(xù)將選取一部分進行介紹。但 d3.max()、d3.min() 與 d3.extent() 函數應該這當中是最常用的。

圖 3.13 輸出到控制臺并按降序排列的數據集

圖 3.13 輸出到控制臺并按降序排列的數據集

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

代碼清單 3.2 數據的加載、轉換與測量邏輯（main.js）

const svg = d3.select(".responsive-svg-container").append("svg")  // 添加一個 SVG 容器.attr("viewBox", "0 0 1200 1600")     .style("border", "1px solid black");  d3.csv("../data/data.csv", d => { // 加載數據集// 對數據進行格式化處理return {technology: d.technology,  count: +d.count            };
}).then(data => {// 對數據集進行測量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]// 讓數據集按降序排列data.sort((a, b) => b.count - a.count);// 將數據集傳給另一個函數作進一步處理createViz(data);
});// 構建條形圖的處理函數
const createViz = (data) => {};