树形图

¥Treemap Diagram

树状图将层次结构数据显示为一组嵌套的矩形。树的每个分支都用一个矩形表示，然后用代表子分支的小矩形平铺。

¥A treemap diagram displays hierarchical data as a set of nested rectangles. Each branch of the tree is represented by a rectangle, which is then tiled with smaller rectangles representing sub-branches.

警告

这是 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:

• 可视化分层数据结构

  ¥Visualizing hierarchical data structures

• 比较类别之间的比例

  ¥Comparing proportions between categories

• 在有限空间内显示大量层级数据

  ¥Displaying large amounts of hierarchical data in a limited space

• 识别层级结构数据中的模式和异常值

  ¥Identifying patterns and outliers in hierarchical data

语法

¥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:

• 部分/父节点：使用引号 "Section Name" 定义

  ¥Section/Parent nodes: Defined with quoted text "Section Name"

• 带有值的叶节点：使用引号后跟冒号和值 "Leaf Name": value 定义

  ¥Leaf nodes with values: Defined with quoted text followed by a colon and value "Leaf Name": value

• 层级结构：使用缩进（空格或制表符）创建

  ¥Hierarchy: Created using indentation (spaces or tabs)

• 样式：节点可以使用 :::class 语法设置样式

  ¥Styling: Nodes can be styled using the :::class syntax

示例

¥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:

选项	描述	默认
useMaxWidth	如果设置为 true，则图表宽度设置为 100%，并根据可用空间缩放	true
padding	节点间内部填充	10
diagramPadding	在整个图表周围添加填充	8
showValues	是否在树状图中显示值	true
nodeWidth	节点宽度	100
nodeHeight	节点高度	40
borderWidth	宽度边框	1
valueFontSize	值的字体大小	12
labelFontSize	标签字体大小	14
valueFormat	值的格式（参见“值格式”部分）	','

高级功能

¥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:

• , - 千位分隔符（默认）

  ¥, - Thousands separator (default)

• $ - 添加美元符号

  ¥$ - Add dollar sign

• .1f - 显示一位小数

  ¥.1f - Show one decimal place

• .1% - 以百分比形式显示，保留一位小数

  ¥.1% - Show as percentage with one decimal place

• $0,0 - 带千位分隔符的美元符号

  ¥$0,0 - Dollar sign with thousands separator

• $.2f - 带两位小数的美元符号

  ¥$.2f - Dollar sign with 2 decimal places

• $,.2f - 带千位分隔符和两位小数的美元符号

  ¥$,.2f - Dollar sign with thousands separator and 2 decimal places

树状图既支持标准 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:

1. 财务数据：可视化预算分配、市场份额或产品组合构成

   ¥Financial Data: Visualizing budget allocations, market shares, or portfolio compositions

2. 文件系统分析：显示文件夹和文件的磁盘空间使用情况

   ¥File System Analysis: Showing disk space usage by folders and files

3. 人口统计数据：显示各区域和子区域的人口分布

   ¥Population Demographics: Displaying population distribution across regions and subregions

4. 产品层级结构：可视化产品类别及其销售量

   ¥Product Hierarchies: Visualizing product categories and their sales volumes

5. 组织结构：表示公司中的部门和团队规模

   ¥Organizational Structures: Representing departments and team sizes in a company

限制

¥Limitations

• 当数据具有自然的层次结构时，树状图效果最佳。

  ¥Treemap diagrams work best when the data has a natural hierarchy

• 树状图中，非常小的值可能难以查看或标记

  ¥Very small values may be difficult to see or label in a treemap diagram

• 深层层级结构（多层级）难以清晰展示

  ¥Deep hierarchies (many levels) can be challenging to represent clearly

• 树状图不太适合表示负值数据

  ¥Treemap diagrams are not well suited for representing data with negative values

相关图表

¥Related Diagrams

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

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

• 饼图：用于不包含层级结构的简单比例比较

  ¥Pie Charts: For simple proportion comparisons without hierarchy

• 旭日图：用于具有径向布局的层级数据（Mermaid 中尚未发布）。

  ¥Sunburst Diagrams: For hierarchical data with a radial layout (yet to be released in Mermaid).

• 桑基图：基于流的分层数据

  ¥Sankey Diagrams: For flow-based hierarchical data

注意

¥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.