树状图

【Treemap Diagram】

树图显示分层数据为一组嵌套的矩形。树的每个分支由一个矩形表示，然后用表示子分支的更小矩形进行平铺。

警告

这是 Mermaid 中的一种新图表类型。其语法在未来版本中可能会有所变化。

介绍

【Introduction】

树状图是一种有效的方式来可视化层级数据，并显示类别与子类别之间的比例。每个矩形的大小与其代表的数值成比例，使得比较层级结构的不同部分变得容易。

【Treemap diagrams are an effective way to visualize hierarchical data and show proportions between categories and subcategories. The size of each rectangle is proportional to the value it represents, making it easy to compare different parts of a hierarchy.】

矩形树图特别适用于：

【Treemap diagrams are particularly useful for:】

可视化层次数据结构
比较类别之间的比例
在有限空间中显示大量层级数据
识别分层数据中的模式和异常值

语法

【Syntax】

treemap-beta
"Section 1"
    "Leaf 1.1": 12
    "Section 1.2"
      "Leaf 1.2.1": 12
"Section 2"
    "Leaf 2.1": 20
    "Leaf 2.2": 25

节点定义

【Node Definition】

树状图中的节点使用以下语法定义：

【Nodes in a treemap are defined using the following syntax:】

章节/父节点：用带引号的文本 "章节名称" 定义
叶节点（叶节点）：定义为引号文本，后加冒号，值为“”叶片名“：值
层级：使用缩进（空格或制表符）创建
样式：节点可以使用 :::class 语法来设置样式

示例

【Examples】

基本树图

【Basic Treemap】

分级矩形树图

【Hierarchical Treemap】

带样式的树状图

【Treemap with Styling】

样式与配置

【Styling and Configuration】

树状图可以使用 Mermaid 的样式和配置选项进行自定义。

【Treemap diagrams can be customized using Mermaid's styling and configuration options.】

使用 classDef 进行样式设置

【Using classDef for Styling】

你可以使用 classDef 语法为节点定义自定义样式，这是许多 Mermaid 图表类型中的标准功能：

【You can define custom styles for nodes using the classDef syntax, which is a standard feature across many Mermaid diagram types:】

主题配置

【Theme Configuration】

你可以使用主题配置自定义树状图的颜色：

【You can customize the colors of your treemap using the theme configuration:】

图表边距

【Diagram Padding】

你可以使用 diagramPadding 配置选项调整树图周围的间距：

【You can adjust the padding around the treemap diagram using the diagramPadding configuration option:】

配置选项

【Configuration Options】

树状图支持以下配置选项：

【The treemap diagram supports the following configuration options:】

Option	Description	Default
useMaxWidth	When true, the diagram width is set to 100% and scales with available space	true
padding	Internal padding between nodes	10
diagramPadding	Padding around the entire diagram	8
showValues	Whether to show values in the treemap	true
nodeWidth	Width of nodes	100
nodeHeight	Height of nodes	40
borderWidth	Width of borders	1
valueFontSize	Font size for values	12
labelFontSize	Font size for labels	14
valueFormat	Format for values (see Value Formatting section)	','

高级功能

【Advanced Features】

数值格式化

【Value Formatting】

树图中的数值可以通过 valueFormat 配置选项以不同的方式显示。该选项主要使用 D3 的格式说明符来控制数字的显示方式，同时还针对一些常见格式提供了额外的特殊情况。

【Values in treemap diagrams can be formatted to display in different ways using the valueFormat configuration option. This option primarily uses D3's format specifiers to control how numbers are displayed, with some additional special cases for common formats.】

一些常见的格式模式：

【Some common format patterns:】

, - 千位分隔符（默认）
$ - 添加美元符号
.1f - 显示一位小数
.1% - 显示为带一位小数的百分比
$0,0 - 带有千位分隔符的美元符号
$.2f - 带有两位小数的美元符号
$,.2f - 带千位分隔符和两位小数的美元符号

树状图支持标准的 D3 格式说明符以及一些常见的货币格式，这些格式将美元符号与其他格式选项组合使用。

【The treemap diagram supports both standard D3 format specifiers and some common currency formats that combine the dollar sign with other formatting options.】

带货币格式的示例：

【Example with currency formatting:】

带百分比格式的示例：

【Example with percentage formatting:】

常见用例

【Common Use Cases】

矩形树图通常用于：

【Treemap diagrams are commonly used for:】

财务数据：可视化预算分配、市场份额或投资组合构成
文件系统分析：显示各文件夹和文件的磁盘空间使用情况
人口统计：显示各地区及子地区的人口分布
产品层级：可视化产品分类及其销售量
组织结构：表示公司中的部门和团队规模

限制

【Limitations】

当数据有自然层级时，树形图效果最佳
在矩形树图中，非常小的数值可能难以看到或标注
深层次的层级结构（多级）可能难以清晰地呈现
树状图不适合表示带有负值的数据

【Related Diagrams】

如果树状图不适合你的需求，可以考虑以下替代方案：

【If treemap diagrams don't suit your needs, consider these alternatives:】

饼图：用于没有层级的简单比例比较
旭日图：用于具有径向布局的层级数据（Mermaid 中尚未发布）。
桑基图：用于基于流的分层数据

注意

【Notes】

Mermaid 中的树图实现旨在易于使用，同时提供强大的可视化功能。由于这是一种较新的图表类型，欢迎通过 Mermaid 的 GitHub 仓库提供反馈和功能请求。

【The treemap diagram implementation in Mermaid is designed to be simple to use while providing powerful visualization capabilities. As this is a newer diagram type, feedback and feature requests are welcome through the Mermaid GitHub repository.】

树状图 ​

介绍 ​

语法 ​

节点定义 ​

示例 ​

基本树图 ​

分级矩形树图 ​

带样式的树状图 ​

样式与配置 ​

使用 classDef 进行样式设置 ​

主题配置 ​

图表边距 ​

配置选项 ​

高级功能 ​

数值格式化 ​

常见用例 ​

限制 ​

相关图表 ​

注意 ​

树状图

介绍

语法