D3 笔记八：布局

本文目前来说，是学完极客学院的《D3.js 入门教程》之后的整理出来的精简知识版，仅仅是为了知识整理。后期我会随着学习的深入，在这个基础上，进行维护与更改。

一、布局是什么

布局，英文是 Layout。从字面看，可以想到有“决定什么元素绘制在哪里”的意思，而经过我的学习后，感觉 D3 中的布局有“决定原生数据该绘制成哪种可视化图形”的作用。

我们先来看看 D3 与其它可视化工具的区别：

我们看到 D3 相对于其他可视化工具（Highcharts、Echarts）会在绘图之前对原生数据进行数据处理——我认为这个过程就叫布局。

因此，布局的定义也就很好给出了：“将不适合用于绘图的数据转换成了适合用于绘图的数据”，也就是数据转换。

二、布局有哪些

D3 总共提供了 12 个布局：

直方图（Histogram）、饼状图（Pie）、力导向图（Force）、弦图（Chord）、捆图（Bundle）、堆栈图（Stack）、
层级图（Hierarchy）、
集群图（Cluster）、打包图（Pack）、分区图（Partition）、树状图（Tree）、矩阵树图（Treemap）。

这 12 个布局中，层级图（Hierarchy）不能直接使用，但它衍生扩展而来的集群图、打包图、分区图、树状图、矩阵树图却是可以直接用于商业化。这也就是为什么我在列举上述 12 个布局的后 5 中布局的时候，特意另起一行的原因。

如此一来，这 12 个布局中，有 7 个布局是基础的，另外 5 个是高阶性的。这些布局的作用都是将某种数据转换成另一种数据，而转换后的数据便是利于可视化的。

到这里你可能对于布局的概念相对之前的概念来说，还是比较模糊的，别着急继续往下看。