D3 迎來全新版本 5.0 發布

還是那個熟悉的界面，但 D3 已經悄悄迎來了一個全新的版本——5.0。

就在幾個小時前，Mike Bostock 修改了 D3 倉庫主分支的 CHANGES.md，意味著 D3 5.0 正式發布。相比 D3 4.0 版本大刀闊斧的自我革命式更新（包括整體代碼模塊化切分、多個二級 API 改動、採用 ES2015 modules 重寫等等），5.0 版本 更新的 feature 中只有少量向後不兼容的改動。

從2011年2月18日發布 D3 1.0.0 版本開始，D3 已經穩步向前走到了第八個年頭，觀察如今的可視化領域，眾多依賴 D3 高級封裝的可視化庫層出不窮，NVD3、C3、D4等等，在他們的 introduction 部分無一例外的都會寫上一句：

… is a visualization library based on D3.

有些庫緊隨 D3 的更新而迭代發版，而有些庫止步於前年的那次版本大更新。由於 D3 對界面中的可視化元素具有很大的可控性，這也意味著該庫的上手難度相比其他 JavaScript 庫會更大一些。而由於歷史和現實原因，很多開發人員並非專職做可視化設計與研發，所以對他們來說可視化只是他們眾多需求中一個需要快速完成的任務。

基於此現狀，國內很多可視化團隊也在不斷研發更適合國人開發的可視化工具庫，一方面是為了降低可視化研發的入門門檻，另一方面應該也是受 Mike 的鼓舞，想在可視化工具庫領域做點有意思的事吧。Echarts，由於涵蓋了多個圖表類型、較早採用 canvas + SVG 平衡渲染性能以及幾乎零配置的開發成本，其名聲被傳遍大街小巷。

G2，基於 The Grammar of Graphics 開發，由於遵循一套比較完整的從數據到圖形的映射關係，為開發人員提供了較強的定製化圖表開發能力，其優秀的表現同時也獲得了 The Grammar of Graphics 一書作者的肯定：

扯遠了，我們回到 D3 上來吧。總而言之，在 Web 可視化領域，經過多年的發展，D3 可以算得上是全球最知名的 JavaScript 開源庫了，這裡都不用加上之一。D3.js，或者稱為 D3，全稱是 Data-Driven Documents，一個用動態圖形顯示數據的 JavaScript 庫，一個數據可視化的工具。基於 Web 層面，D3 通過操縱三類對象來達到數據驅動可視化展現的目的，這三類對象分別是 SVG，Canvas 和 HTML 上的基本 DOM。它兼容 W3C 標準，並且利用廣泛實現的 SVG，JavaScript 和 CSS 標準來封裝底層介面。接下來，我們細細看看 D3 在全新的版本中都有哪些改變。

在 5.0 版本中，D3 開始採用 Promises 而不是傳統的非同步回調來載入數據。熟悉 Promise 的同學應該知道， Promise 可以簡化非同步代碼的結構，特別是在支持 async/await 用法的現代瀏覽器中（詳情可以參閱 Observable 的 Promise 介紹一文）。例如，在 D3 4.X 版本中載入一個 CSV 文件，你也許會這樣操作：

d3.csv("file.csv", function(error, data) { if (error) throw error; console.log(data);});

而在 D3 5.X 版本中，你可以使用 promise 這樣書寫：

d3.csv("file.csv").then(function(data) { console.log(data);});

值得注意的是，你不再需要重新拋出獲得的 error——promise 會自動 reject 產生的錯誤，如果需要的話你可以通過 promise.catch 來處理它。如果使用 await 語法，你的代碼將更加簡潔：

const data = await d3.csv("file.csv");console.log(data);

隨著 promises 在 D3 中的採用，D3 現在使用 Fetch API 替代原有的 XMLHttpRequest，隨之對應的是 d3-request 木塊被 d3-fetch 替代。Fetch 支持很多強大的功能，例如 streaming responses。D3 5.0 同時也棄用並刪除了 d3-queue 模塊。你可以使用 Promise.all 來並行運行批量的非同步任務，或者使用 p-queue 等輔助庫來控制並發。

D3 不再提供類似 d3.schemeCategory20* 的分類顏色方案。這二十種顏色方案存在明顯缺陷，因它們的分組設計可能會錯誤的暗示數據之間的關係：一份共享的色調可能意味著對應的數據會歸屬到同一組別中，而顏色亮度的深淺可能會暗示數據的順序。 取而代之的是，D3現在包含一個庫叫 d3-scale-chromatic，它實現了 ColorBrewer 中的一些優秀的配色方案，這包括分類，發散，連續單色以及連續多色 等方案。這些方案既支持離散變數同時也支持連續變數賦值。

D3 現在提供了通過 d3-contour 來實現 marching squares 演算法和密度估計的可視化效果！現在有兩種新的 *selection*.clone API 方法：其中，*selection*.clone API用於插入所選節點的克隆版本，而 d3.create 可以用於創建分離的元素節點。d3-geo 地理投影模塊現在支持 *projection*.angle API，這促使我們現在可以使用由 Philippe Rivière 開發提供的若干全新的多面投影方法（模塊）了。

最後，D3 的 package.json 文件不再引用從屬於 D3 模塊的精確版本號了。這解決了 D3 模塊重複安裝的一個問題。

相比 D3 4.0 版本長篇闊論對其中的多個改動進行詳細介紹，5.0 CHANGES 只包含短短几段就將新版本的功能介紹完畢。不論你是第一次聽說 D3，還是曾經聽過 D3 但不熟悉利用 D3 進行開發，又或者一直尾隨 D3 從 v3 一路走來，現在 D3 5.0 已經發布，何不上手試試呢？

直接從官網引入庫，利用 CDNJS 或者 unpkg 又或者從 npm 上下載，總有一種方式適合你。引入整個包文件或者只引入一個 D3 小模塊也是任你挑選：

// 引入整個庫文件<script src="https://d3js.org/d3.v5.js"></script>// 引入壓縮後的整個庫文件<script src="https://d3js.org/d3.v5.min.js"></script>// 只引入 d3-selection 模塊<script src="https://d3js.org/d3-selection.v1.js"></script>// 使用 import 語法引入具體的 D3 模塊import {scaleLinear} from "d3-scale";// 使用 import 語法引入整個 D3import * as d3 from "d3";// 在 Node 中引入 D3var d3 = require("d3");// 針對多個 D3 模塊獨立引入後合併至 d3 命名空間var d3 = Object.assign({}, require("d3-format"), require("d3-geo"), require("d3-geo-projection"));

更多 D3 及官方示例可以移步 D3 官網，關於 D3 歷次版本 Changes log 可以查看 CHANGES.md。不少同學還留戀於 D3 V3 的開發，關於這方面的中文文檔可以移步由 VisualCrew 小組組織翻譯的 API V3 中文手冊，D3 V4 版本中文文檔可以查看 中文手冊v4。

WebGL 方面的三維可視化可以參考 mrdoob 的 three.js，關於地理空間的可視化可以參考 mapbox，leaflet 和 openstreetmap 的相關開源庫，例如 mapbox-gl-js 等等。

更多 D3 代碼示例可以查看 D3 Gallery，當然，更好的 D3 作品等待你的呈現。

原文鏈接 - D3 迎來全新版本 5.0 發布

個人公眾號，微信搜索「黯曉」或掃描 二維碼 關注，會同步我在知乎及個人博客上發表的文章，談談前端技術與日常有趣事。知乎專欄是 初級前端工程師。

生活中難免犯錯，請多多指教！