D3 迎來全新版本 5.0 發佈

原文連接 - zhuanlan.zhihu.com/p/34853267 

仍是那個熟悉的界面，但 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 算法和 密度估計的可視化效果！如今有兩種新的 d3-selection 方法：其中， *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 語法引入整個 D3
import * as d3 from "d3";

// 在 Node 中引入 D3
var 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 做品等待你的呈現。

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

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