【D3.js 学习总结】8、D3布局介绍

布局是 D3 中一个十分重要的概念,可以理解成 “制作常见图形的函数”,有了它制作各种相对复杂的图表就方便多了。
D3 与其它很多可视化工具不同,相对来说较底层,对初学者来说不太方便,但是一旦掌握了,就比其他工具更加得心应手。

下图展示了 D3 与其它可视化工具的区别:
【D3.js 学习总结】8、D3布局介绍

布局的作用是:将不适合用于绘图的数据转换成了适合用于绘图的数据。

D3 总共提供了 12 个布局:

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

12 个布局中,层级图(Hierarchy)不能直接使用。集群图、打包图、分区图、树状图、矩阵树图是由层级图扩展来的。如此一来,能够使用的布局是 11 个(有 5 个是由层级图扩展而来)。这些布局的作用都是将某种数据转换成另一种数据,而转换后的数据是利于可视化的。

Pie —- 饼状图

【D3.js 学习总结】8、D3布局介绍

Force —- 力学图、力导向图

【D3.js 学习总结】8、D3布局介绍

Chord —- 弦图

【D3.js 学习总结】8、D3布局介绍

Bundle —- 捆图

【D3.js 学习总结】8、D3布局介绍

Cluster —- 集群图

【D3.js 学习总结】8、D3布局介绍

Histogram —- 直方图(数据分布图)

【D3.js 学习总结】8、D3布局介绍

Pack —- 打包图

【D3.js 学习总结】8、D3布局介绍

Partition —- 分区图

【D3.js 学习总结】8、D3布局介绍

Stack —- 堆栈图

【D3.js 学习总结】8、D3布局介绍

Tree —- 树状图

【D3.js 学习总结】8、D3布局介绍

Treemap —- 矩阵树图

【D3.js 学习总结】8、D3布局介绍

上一篇:如何设置不让editplus生成bak文件


下一篇:scrapy 设置爬取深度 (七)