Plotly.js Treemap 核心概念：labels 与 parents 数组
在使用plotly.js创建treemap时，其核心在于理解labels和parents这两个数组如何协同工作来构建层次结构。与我们直观想象的嵌套json对象不同，plotly采用了一种扁平化的表示方法，这对于大规模数据处理和动态更新具有独特的优势。
- labels 数组：这个数组包含了Treemap中所有节点（包括根节点、中间节点和叶子节点）的唯一标识符。这些标识符通常是字符串，它们将显示在图表上作为每个区块的标签。数组中的每个元素代表一个独立的区块。
- parents 数组：这个数组与labels数组一一对应，parents[i]的值指定了labels[i]所代表的节点的父节点。如果一个节点没有父节点（即它是根节点），则其对应的parents值为一个空字符串""。
理解的关键在于，labels和parents数组的索引是同步的。labels数组定义了“谁是谁”，而parents数组定义了“谁的父亲是谁”。通过这种方式，Plotly能够解析出任意深度的树形结构。
从嵌套结构到 Plotly 格式的转换
为了更好地说明如何构建这些数组，我们以一个常见的嵌套JSON结构为例，将其转换为Plotly Treemap所需的labels和parents格式。
假设我们有以下层级关系数据：
{
"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数组中节点的顺序，逐一确定其父节点。
- labels[0] 是 "root"。它是整个结构的根，没有父节点，所以 parents[0] 为 ""。
- labels[1] 是 "topItem"。根据JSON结构，它的父节点是 "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"]
完整示例代码
结合上述转换结果，我们可以构建一个完整的Plotly.js Treemap示例：
<!DOCTYPE html>
<html>
<head>
<title>Plotly Treemap 层次结构示例</title>
<!-- 引入 Plotly.js 库 -->
<script src="https://cdn.plot.ly/plotly-2.20.0.min.js"></script>
</head>
<body>
<div id='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, 5, 8, 7],
// marker: {colors: ["#636EFA", "#EF553B", "#00CC96", "#AB63FA", "#FF6692", "#B6E880", "#FF97FF", "#FECB52"]},
// pathbar: {visible: true} // 显示路径条
}];
const layout = {
margin: { t: 50, l: 0, r: 0, b: 0 },
title: 'Plotly.js Treemap 层次结构演示'
};
Plotly.newPlot('chart', data, layout);
</script>
</body>
</html>在上述代码中，我们创建了一个type: "treemap"的图表对象，并传入了我们构建好的labels和parents数组。运行此HTML文件，你将看到一个清晰地展示了我们定义层次结构的Treemap图表。
注意事项与最佳实践
- 唯一性与一致性：labels数组中的每个标签必须是唯一的，它们作为节点的唯一标识符。parents数组中的任何非空值都必须在labels数组中找到对应的标签。
- 根节点：至少需要一个根节点，其对应的parents值为""。Treemap可以有多个根节点，它们将作为顶层区块并列显示。
- 顺序重要性：labels和parents数组的元素顺序必须严格对应。labels[i]的父节点必须是parents[i]。
- 数据量与性能：对于非常庞大的数据集，手动构建这些数组会非常繁琐。建议编写脚本或函数来自动化这个转换过程。例如，可以遍历原始嵌套数据结构，递归地收集所有节点及其父节点。
- 动态更新：要动态修改Treemap（例如，添加、删除或移动节点），你需要相应地更新labels和parents数组，然后使用Plotly.react()或Plotly.restyle()方法重新绘制图表。
- values 数组：除了labels和parents，values数组也是Treemap常用的一个属性。它用于指定每个区块的大小。values[i]对应labels[i]区块的大小。如果未提供values，Plotly会默认将叶子节点的值设为1，并向上累加。
总结
Plotly.js Treemap通过其独特的labels和parents数组组合，提供了一种强大而灵活的方式来表示和可视化层次结构数据。虽然这种扁平化的结构可能与传统的嵌套数据模型有所不同，但一旦掌握了其转换逻辑，就能高效地构建和定制复杂的Treemap图表。理解labels作为节点标识、parents作为父节点引用，以及空字符串""表示根节点的原则，是成功使用Plotly Treemap的关键。通过遵循本文提供的转换步骤和最佳实践，开发者可以轻松地将各种层次数据转换为Treemap所需的格式，并充分利用Plotly.js的强大功能进行数据可视化。
