1. Plotly.js Treemap层级数据模型概述
plotly.js的treemap图表是一种强大的数据可视化工具，用于展示层次结构数据。与许多开发者习惯的嵌套json对象结构不同，plotly.js treemap采用一种扁平化的数组结构来定义数据项之间的父子关系。这种结构主要依赖于两个核心数组：labels和parents。理解这两个数组如何协同工作是掌握plotly.js treemap的关键。
- labels数组：包含Treemap中所有唯一的节点名称。这些名称可以是任何字符串，代表层级中的一个具体项。
- parents数组：与labels数组一一对应，其每个元素指定了labels数组中相应位置元素的父节点名称。如果一个节点是顶层节点（根节点），则其对应的parents元素应为空字符串""。
这种设计使得Treemap的数据定义既简洁又高效，但初次接触时可能会因为与传统嵌套数据模型不同而感到困惑。
2. 从嵌套结构到扁平数组的转换
为了更好地理解labels和parents数组的工作原理，我们以一个典型的嵌套JSON结构为例，逐步演示如何将其转换为Plotly.js Treemap所需的数据格式。
假设我们有一个如下所示的层级结构：
{
"root": { "topItem" },
"topItem": { "one", "two", "three" },
"one": { "something" },
"two": { "thing", "whatever" }
}我们的目标是将这个层级关系映射到labels和parents数组中。
步骤一：提取所有唯一的节点名称到labels数组
首先，遍历所有层级，将其中出现的每一个唯一节点名称收集起来，并按照任意顺序放入labels数组。例如：
labels: ["root", "topItem", "one", "two", "three", "something", "thing", "whatever"]
步骤二：为每个节点指定其父节点到parents数组
接下来，根据labels数组的顺序，为每个节点找到其对应的父节点，并将其父节点名称放入parents数组的相同索引位置。
- labels[0]是"root"，它是最顶层节点，没有父节点，所以parents[0]为""。
- labels[1]是"topItem"，其父节点是"root"，所以parents[1]为"root"。
- labels[2]是"one"，其父节点是"topItem"，所以parents[2]为"topItem"。
- labels[3]是"two"，其父节点是"topItem"，所以parents[3]为"topItem"。
- labels[4]是"three"，其父节点是"topItem"，所以parents[4]为"topItem"。
- labels[5]是"something"，其父节点是"one"，所以parents[5]为"one"。
- labels[6]是"thing"，其父节点是"two"，所以parents[6]为"two"。
- labels[7]是"whatever"，其父节点是"two"，所以parents[7]为"two"。
最终得到的parents数组如下：
parents: ["", "root", "topItem", "topItem", "topItem", "one", "two", "two"]
3. 示例代码：构建Plotly.js Treemap
结合上述转换结果，我们可以构建一个完整的Plotly.js Treemap示例：
<!DOCTYPE html>
<html>
<head>
<title>Plotly.js Treemap层级示例</title>
<script src="https://cdn.plot.ly/plotly-2.20.0.min.js"></script>
</head>
<body>
<div id="treemap-chart" style="width:100%; height:600px;"></div>
<script>
const data = [{
type: "treemap",
labels: ["root", "topItem", "one", "two", "three", "something", "thing", "whatever"],
parents: ["", "root", "topItem", "topItem", "topItem", "one", "two", "two"],
// 可选：添加值来决定每个矩形的大小
// values: [100, 50, 20, 15, 15, 10, 8, 7],
// marker: {colors: ["#636EFA", "#EF553B", "#00CC96", "#AB63FA", "#FF6692", "#B6E880", "#FF97FF", "#FECB52"]},
// textinfo: "label+value"
}];
const layout = {
margin: { t: 50, l: 25, r: 25, b: 25 },
title: "Plotly.js Treemap层级示例"
};
Plotly.newPlot('treemap-chart', data, layout);
</script>
</body>
</html>在上述代码中，values数组是可选的，它决定了Treemap中每个矩形的大小。如果没有提供values，Plotly会根据子元素的数量或默认值来分配大小。
4. 如何添加或修改层级
理解了labels和parents的工作原理后，添加或修改Treemap的层级结构就变得非常直观。
假设我们想在示例中的"two"节点下添加三个新的子节点："childA"、"childB"和"childC"。
我们只需要对labels和parents数组进行相应的扩展：
-
更新labels数组：将新的子节点名称添加到labels数组的末尾（或任何位置，只要与parents数组保持同步）。
labels: ["root", "topItem", "one", "two", "three", "something", "thing", "whatever", "childA", "childB", "childC"]
-
更新parents数组：为新添加的每个子节点指定其父节点"two"。
parents: ["", "root", "topItem", "topItem", "topItem", "one", "two", "two", "two", "two", "two"]
将这两个更新后的数组代入data对象，重新渲染Treemap即可看到新的层级结构。
5. 注意事项与最佳实践
- 唯一性：labels数组中的所有元素必须是唯一的。如果存在重复的标签，Plotly.js可能会抛出错误或产生不可预测的行为。
- 对应性：labels和parents数组的长度必须严格相等，且索引位置必须一一对应。labels[i]的父节点必须是parents[i]。
- 根节点：顶层节点（没有父节点的节点）在parents数组中对应的位置必须是空字符串""。
- 无环图：确保你的层级结构是一个有向无环图（DAG），即不允许出现循环引用（例如，A是B的父，B又是A的父）。
- 可读性：虽然labels和parents的顺序在技术上是灵活的（只要对应关系正确），但为了代码的可读性和维护性，建议将相关联的节点（如父节点及其所有子节点）放在一起，或者按照某种逻辑顺序（如深度优先或广度优先）排列。
- 性能：对于非常庞大的数据集，扁平化数组的构建可能需要一些优化。考虑使用程序化方式生成这些数组，而不是手动维护。
总结
Plotly.js Treemap通过其独特的labels和parents数组机制，提供了一种灵活且强大的方式来定义复杂的层级数据。虽然这种扁平化的结构与传统的嵌套对象有所不同，但一旦理解了其核心原理——即labels定义所有节点，parents定义每个节点的直接父级——你就能轻松地构建、修改和可视化任何层级数据。通过本文提供的转换步骤和示例，开发者可以更好地掌握这一功能，从而创建出更具洞察力的Treemap图表。
