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

    xiaoxiao2026-03-08  5

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

    下图展示了 D3 与其它可视化工具的区别:

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

    D3 总共提供了 12 个布局:

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

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

    Pie —- 饼状图

    Force —- 力学图、力导向图

    Chord —- 弦图

    Bundle —- 捆图

    Cluster —- 集群图

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

    Pack —- 打包图

    Partition —- 分区图

    Stack —- 堆栈图

    Tree —- 树状图

    Treemap —- 矩阵树图

    相关资源:java统计代码行数生成json文件 D3.js绘制树图(矩形分区图、圆状集群图、矩阵树图) 实验报告
    最新回复(0)