D3.js 布局

布局，能够理解成 “制做常见图形的函数”，有了它制做各类相对复杂的图表就方便多了。

 

 

 

1、布局是什么

　　布局，英文是 Layout。从字面看，能够想到有“决定什么元素绘制在哪里”的意思。布局是 D3 中一个十分重要的概念。

　　D3 与其它不少可视化工具不一样，相对来讲较底层，对初学者来讲不太方便，可是一旦掌握了，就比其余工具更加驾轻就熟。下图展现了 D3 与其它可视化工具的区别：

　　

　

　 能够看到，D3 的步骤相对来讲较多。坏处是对初学者不方便、也很差理解。好处是可以制做出更加精密的图形。所以，咱们能够据此定义何时选择 D3 比较好：

• 选择 D3：若是但愿开发脑海中任意想象到的图表。
• 选择 Highcharts、Echarts 等：若是但愿开发几种固定种类的、十分大众化的图表。

 

 

2、如何理解布局

　　从上面的图能够看到，布局的做用是：将不适合用于绘图的数据转换成了适合用于绘图的数据。

　　所以，为了便于初学者理解，本站的教程叫布局的做用解释成：数据转换。

 

 

 

3、布局有哪些

　　D3 总共提供了 12 个布局：饼状图（Pie）、力导向图（Force）、弦图（Chord）、树状图（Tree）、集群图（Cluster）、捆图（Bundle）、打包图（Pack）、直方图（Histogram）、分区图（Partition）、堆栈                                                图（Stack）、矩阵树图（Treemap）、层级图（Hierarchy）。
　　12 个布局中，层级图（Hierarchy）不能直接使用。集群图、打包图、分区图、树状图、矩阵树图是由层级图扩展来的。如此一来，可以使用的布局是 11 个（有 5 个是由层级图扩展而来）。

　　这些布局的做用都是将某种数据转换成另外一种数据，而转换后的数据是利于可视化的。

 

　　Bundle  —-  捆图

　　　　

　　Chord  —-  弦图

　　　　

　　Cluster  —-  集群图

　　　　

　　Force  —-  力学图、力导向图

　　　　

　　Histogram  —-  直方图（数据分布图）

　　　　

　　Pack  —-  打包图

　　　　

　　Partition  —-  分区图

　　　　

　　Pie  —-  饼状图

　　　　

　　Stack  —-  堆栈图

　　　　

　　Tree  —-  树状图

　　　　

　　Treemap  —-  矩阵树图