数据可视化之路 - d3入门

d3 可能  是前端可视化领域最有名的工具了，这篇文章会简单介绍下 d3 这个工具。

d3是什么

按照官方文档上说，d3 是一套数据可视化工具，用来帮咱们创建数据驱动的 DOM 模型。（固然也包括图表），可是和 DataV、Echarts 之类图表不一样的是: d3 并非开箱即用的，使用 d3 须要对诸如 html、svg、canvas技术有足够的了解，同时也给咱们开发提供了更多的灵活性。

这里的条形图能够看到 d3 是如何作可视化的。

d3包括那些组件

Selection

若是你以前接触过d3，那么你可能对d3 selection 的链式调用有所了解。和 jquery 同样，d3 封装了大部分 DOM 方法，调用其方法会返回一个 selection 对象，你能够接着在这个对象上对 DOM 进行增删改查，事件绑定等操做。

这是一段从官网copy过来的例子

d3.selectAll("p").style("color", "blue");
复制代码

数据映射

现代前端框架都强调数据驱动，D3中也有相似的概念。例如：

// 步骤1. 绑定数据和 selection
var p = d3.select("body").selectAll("p").data([4, 8, 15, 16, 23, 42]);

// 步骤2. Enter…
p.enter().append("p").text(function(d) {
  return d;
});
// 步骤3. Exit…
p.exit().remove();
复制代码

步骤 1 中咱们将 selection 和对应的数据映射起来，selection 中的一个节点对应了数组中一条数据。注意此时并不会生成真实的 dom 节点。步骤二、3 中咱们分别声明了数据新增时和删除的 selection 操做。d3 会在数据变化时调用这些操做。
经过数据映射，d3 将数据和 selection 链接起来，使咱们免受复杂 dom 状态的困扰，而且保证生成的 dom 是可预测的。enter 和 exit 可让咱们更细粒度的观测到数据的变化，从而做出对应的处理。（好比节点删除动画）

Layout

Layout ，顾名思义，是布局的意思。但d3中的layout强调的是算法而非渲染，这和dataV 或echarts 中将数据和配置传入，直接能够渲染图表不一样。以 tree 为例：

d3 的 tree 会接受树结构的数据，通过 layout 的转换，加上坐标，而后数据绑定到 selection，渲染出树结构。能够看到，layout 只负责坐标转换和计算的部分，至于渲染，d3 不会帮你封装好，须要你主动的用 svg、canvas 甚至html进行渲染。

这里是使用 d3 渲染一棵树的例子。

在 React 中使用

react 和 d3 都强调数据驱动，因此将二者结合其实是很是方便的。
咱们只须要将数据保存在react中，把数据和 d3 链接起来，使用d3来绘制页面便可，好比这个例子
须要注意的是，state 变化时 d3 并不会执行 enter 或者 exit 内的方法，须要咱们手动 componentDidUpdate 声明周期中主动执行渲染操做。这和 Vue 和 React 的响应式是不一样的，d3 并不会去监听 data 的变化，也就不会执行对应的 enter 或 exit 操做。

组件封装

组件化也是很重要的，特别在整个工程变得复杂以前。d3 中也提供了封装组件的方法。这就是 selection.call 方法，例如：

// 声明一个函数，接受 selection 做为参数
function makeStyle(selection) {
  selection.style("width", 300).style("height", 300);
}
// 在 div 的 selection 上调用它
d3.select("div").call(makeStyle);
复制代码

经过 selection.call  咱们能够封装一些组件，在须要的地方调用便可。

可是当 react 和 d3 结合使用时，使用 react 组件仍是 d3 组件呢？大多数状况下，这是要分场景来看的。

1. 当你的界面大部分是 react 渲染而来，并且没有太多交互性时，react 组件是比较好的。好比一个条形图：只须要接受数据和配置，直接渲染出页面。这时把条形图直接作成一个 react 函数式组件，接受 data 和 config，内部使用 d3 来渲染便可。

2. 还有一些状况交互复杂，父组件也是 d3 渲染来的，这时使用 d3 组件更佳。好比编辑器

总结

和 AntV、ECharts 不一样，d3 没有引入新的图形描述语法。使用 d3 须要你了解底层的 svg、canvas 知识。这同时提升了开发难度和灵活度。若是你对图表有高度的自定义需求或者想要了解 svg，canvas 之类的技术，你可使用d3。若是只是普通的图表，使用 Echarts 便可。

---

本人正在编写数据可视化之路系列文章，输出一些可视化方面的教程和经验，你能够经过如下途径阅读它们。

• Github
• 掘金
• 一些可视化demo