Treemap 是一种可视化分层数据的有效方式。Plotly.js 提供了强大的 Treemap 功能，但理解其数据结构对于有效地使用它至关重要。本文将解释如何使用 labels 和 parents 数组在 Plotly.js 中定义 Treemap 的层级结构，并提供示例代码帮助您快速上手。
理解 labels 和 parents 数组
Plotly.js 的 Treemap 通过两个关键数组 labels 和 parents 来定义层级关系。labels 数组包含所有要显示的节点名称，而 parents 数组则指定每个节点的父节点。这两个数组的顺序至关重要，parents[i] 对应于 labels[i] 的父节点。
- labels: 包含 Treemap 中所有节点的名称。这些名称将显示在 Treemap 的各个区块中。
- parents: 包含对应于 labels 数组中每个节点的父节点的名称。根节点的父节点通常设置为空字符串 ""。
构建 Treemap 数据
为了更好地理解 labels 和 parents 的关系，我们以一个 JSON 结构为例，将其转换为 Plotly.js Treemap 所需的数据格式。假设我们有以下 JSON 数据：
{
"root": { "topItem" },
"topItem": { "one", "two", "three" },
"one": { "something" },
"two": { "thing", "whatever" }
}首先，我们需要将所有节点名称提取到 labels 数组中：
const labels = ["root", "topItem", "one", "two", "three", "something", "thing", "whatever"];
接下来，我们需要确定每个节点的父节点，并将其添加到 parents 数组中。注意，根节点 "root" 没有父节点，所以其对应的 parents 值为 ""。
const parents = ["", "root", "topItem", "topItem", "topItem", "one", "two", "two"];
现在，我们已经准备好了构建 Treemap 所需的数据。
Plotly.js 代码示例
以下代码展示了如何使用 labels 和 parents 数组在 Plotly.js 中创建 Treemap：
<!DOCTYPE html>
<html>
<head>
<title>Plotly Treemap Example</title>
<script src="https://cdn.plot.ly/plotly-2.20.0.min.js"></script>
</head>
<body>
<div id='chart'></div>
<script>
const data = [{
type: "treemap",
labels: ["root", "topItem", "one", "two", "three", "something", "thing", "whatever"],
parents: ["", "root", "topItem", "topItem", "topItem", "one", "two", "two" ]
}];
Plotly.newPlot('chart', data);
</script>
</body>
</html>这段代码首先引入 Plotly.js 库，然后在 HTML 页面中创建一个 div 元素，用于显示 Treemap。在 JavaScript 代码中，我们定义了 data 数组，其中包含了 type（设置为 "treemap"）、labels 和 parents 属性。最后，我们使用 Plotly.newPlot 函数将 Treemap 渲染到指定的 div 元素中。
注意事项
- 确保 labels 和 parents 数组的长度一致，否则会导致错误。
- 根节点的 parents 值必须为空字符串 ""。
- parents 数组中的值必须是 labels 数组中已存在的节点名称。
- Plotly.js 提供了丰富的配置选项，可以自定义 Treemap 的颜色、大小、层级显示等。请参考 Plotly.js 官方文档了解更多信息。
总结
通过本文的介绍，您应该已经掌握了使用 Plotly.js 创建 Treemap 的基本方法。理解 labels 和 parents 数组的含义是构建 Treemap 的关键。通过灵活运用这两个数组，您可以轻松地将分层数据可视化为清晰易懂的 Treemap。希望本文能够帮助您在数据可视化方面取得更大的进展。
