plotly.js Treemap通过扁平化的labels和parents数组来定义复杂的层次结构，而非传统的嵌套对象。本文将深入解析这种独特的数据表示方式，演示如何将常见的嵌套数据结构转换为Plotly所需的格式，并通过详细示例代码和最佳实践，帮助开发者高效、准确地构建和定制Treemap图表。
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的强大功能进行数据可视化。
以上就是Plotly.react html js json 数据可视化 绘制图表 json html plotly 标识符 字符串 递归 数据结构 JS 对象 自动化
评论（已关闭）
评论已关闭