> For the complete documentation index, see [llms.txt](https://reee-visual.gitbook.io/ray-design/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://reee-visual.gitbook.io/ray-design/ju-xing-shu-tu.md).

# 矩形树图

树图（tree diagram），又称矩形树图，是一个由不同大小的嵌套式矩形来显示树状结构数据的统计图表。

### 一、矩形树图图解

![](/files/nB3Bo1ZHdaf2UXyg4HeB)

### 二、基本属性

![](/files/VpxOvkO8NyRidEFBm83z)

### 三、数据结构

第一行为第一层级；第二行为第二层级。子层级的数据权重总和与母层级相同。

![](/files/7sM1hWQhlY6QzdiPQbVE)

### 四、适用场景

#### 4.1 带有权重的层级数据场景

适用于带有权重的层积数据场景。 

例如下图：2018 年谷物类秋粮占早稻和夏粮的图表，不单有各类谷物的类型，还包含了各类谷物的占比情况。

![](/files/VgsfPKBCreMT08MWSCxc)

### 五、不适用场景

#### 5.1 不带权重

正如上图，若只有各类谷物类型，没有谷物的占比情况时，使用矩形树图就不适用了。选择树状图更能清楚的表达其关系。

![](/files/DnldPjHGsKKaNDSeeSLt)

#### 5.2 子节点占比过小，且无交互

如下图，子节点过小以至于无法填写节点名称，这种情况可以考虑添加交互操作来弥补。

![](/files/TowC0dFgYmAaPgQJz2My)

#### 5.3 子节点占比相差不大

子节点占比相差不大时，就体现不出矩形树图的优势，无法明显的察觉到视觉重点。

![](/files/2RznDkvjgYbxW4pqbC8L)

### 六、矩形树图图史

与历史悠久的柱状图、饼图相比，矩形树图还是一个比较“年轻”的图表，在90年代初由马里兰大学的教授本·施奈德曼（Ben Shneiderman）和他的团队发明的，最初的原因是为了找到一种有效了解磁盘空间使用情况的方法。

![](/files/ogJyiuWxD59IwQPM6bof)

法国的研究生克里斯托夫·布希尔（Christophe Bouthier）维护了一个开源的矩形树图Java库。

```
http://treemap.sourceforge.net
```

2003 年 10 月，可视化组件的主要供应商ILOG开始提供名为Discovery的主要可视化工具包的免费测试版本。该工具包包括矩形树图，并允许用户显示任何层次结构。 

例如 50000 个文件的目录，根据其文件类型着色。

![](/files/rPzeVyGsVMGXGSMPi7G6)

2007 年 2 月 25 日《纽约时报》使用树状图来显示汽车、货车、SUV 和卡车市场的健康状况。树状图显示了 3 家美国公司和 14 家国际公司、两种车型、销量（尺寸）和销量变化（颜色）。

![](/files/nwSycLbdbPZZTuwrIdHZ)

### 七、设计开眼

以下为具有代表性的设计案例，更多案例持续添加中。

![丰收·动图 | 我国秋粮有望15连丰](/files/a38pTJcsRXD21vzJZI5y) ![各大洲使用最多的国旗颜色](/files/T7mDGNPjKR69g2gfrpT5)

![生活艺术案例：重绘油画](/files/oe8duZItcwsvzzR36AvV) ![](/files/bRAnjP7LcAJMoNKd2zTE)

### 八、更多学习资源

[1、马里兰大学关于树图研究的历史综述。](http://www.cs.umd.edu/hcil/treemap-history/)

[2、树图在设计上的10个注意事项。](https://www.juiceanalytics.com/writing/10-lessons-treemap-design)

[3、更直观的树状图？](https://medium.com/@groupvisualio/a-more-intuitive-treemap-f1f6de1dca1c)