D3.js-Treemap布局

可以跟着这个示例进行实践，注释很详尽：

https://blog.csdn.net/wan353694124/article/details/78951545

适用场景

矩形树状结构图（Treemap）是一种有效的实现层次结构可视化的图表结构，简称矩形树图或树图。在矩形树图中，各个小矩形的面积表示每个子节点的大小，矩形面积越大，表示子节点在父节点中的占比越大，整个矩形的面积之和表示整个父节点。通过矩形树图及其钻取情况，我们可以很清晰地知道数据的全局层级结构和每个层级的详情。

​ –知乎

Demo

https://observablehq.com/collection/@d3/d3-hierarchy

关键函数

d3.treemap

生成一个treemap布局函数。

d3.hierarchy

将数据处理为Node节点对象格式。

数据结构

核心就是层级树状结构。

一个Node下面包含多个children，每个children都是一个Node。

整个画布也是一个Node。

Node

每个Node包含其自身的标题、深度、高度(height具体是什么？)、父节点信息、数值、在画布上的坐标值、子节点列表等，结构如下：

1
2
3
4
5
6
7
8
9
10
children: (18) [Node, Node, Node, Node, Node, Node, Node, Node, Node, Node, Node, Node, Node, Node, Node, Node, Node, Node]
data: {name: "Video Game Sales Data Top 100", children: Array(18)}
depth: 0
height: 2
parent: null
value: 1458.88
x0: 0
x1: 1000
y0: 0
y1: 600