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 做品等待你的呈现。

我的公众号，微信搜索「黯晓」或扫描 二维码 关注，会同步我在知乎及我的博客上发表的文章，谈谈前端技术与平常有趣事。知乎专栏是 初级前端工程师。

生活中不免犯错，请多多指教！