Plotly.js Treemap 层次结构详解与实践指南

Plotly.js Treemap通过扁平化的labels和parents数组定义层次结构，支持高效的数据可视化。以下为详细解析与实践指南：

• labels数组：包含所有节点的唯一标识符（字符串），包括根节点、中间节点和叶子节点。每个元素对应一个独立区块，显示在图表上。
• parents数组：与labels一一对应，parents[i]指定labels[i]的父节点。根节点的父节点为空字符串""。
• 索引同步性：labels和parents的索引必须严格对应，例如labels[2]的父节点由parents[2]定义。

以嵌套JSON结构为例：

转换步骤：

1. 提取所有节点到labels数组按层级遍历所有节点，顺序可自定义但需保持一致：

   labels: ["root", "topItem", "one", "two", "three", "something", "thing", "whatever"]

2. 确定父节点并填充parents数组根据labels顺序逐一匹配父节点：

   labels[0]（"root"）为根节点，parents[0] = ""。

   labels[1]（"topItem"）的父节点是"root"，parents[1] = "root"。

   依此类推，最终得到：parents: ["", "root", "topItem", "topItem", "topItem", "one", "two", "two"]

代码说明：

• values数组：可选属性，指定每个区块的大小。若未提供，Plotly默认将叶子节点值设为1并向上累加。
• marker.colors：自定义区块颜色。
• pathbar.visible：显示路径导航条，便于用户理解层级关系。

1. 唯一性与一致性

   labels中的标识符必须唯一，且parents中的非空值需在labels中存在。

   根节点必须存在，且其parents值为""。

2. 多根节点支持Treemap允许存在多个根节点，它们将作为顶层区块并列显示。例如：

   labels: ["root1", "root2", "child1", "child2"],parents: ["", "", "root1", "root2"]

3. 数据量与性能优化

   手动构建数组适用于小规模数据，大规模数据建议编写脚本自动化转换。例如递归遍历嵌套结构，动态生成labels和parents。

   示例转换函数（伪代码）：function flattenHierarchy(nestedData, parent = "", labels = [], parents = []) { for (const [key, children] of Object.entries(nestedData)) { labels.push(key); parents.push(parent); if (Object.keys(children).length > 0) { flattenHierarchy(children, key, labels, parents); } } return { labels, parents };}

4. 动态更新图表

   修改labels或parents后，使用Plotly.react()或Plotly.restyle()重新渲染图表，避免重新初始化。

5. 区块大小控制

   通过values数组精确控制区块大小。例如，销售数据中可用销售额作为值。

Plotly.js Treemap通过扁平化的labels和parents数组实现灵活的层次结构可视化。关键点包括：

• 唯一标识符：labels中的每个节点需唯一。
• 父节点引用：parents通过索引与labels同步，空字符串表示根节点。
• 自动化转换：大规模数据建议编写脚本生成数组。
• 动态交互：结合values和marker属性增强图表表现力。

掌握上述逻辑后，可高效将各类层次数据转换为Treemap格式，并利用Plotly.js的丰富功能实现动态、交互式的数据可视化。