javascript - 我可以更简单地解释如何使用plotly.js 来了解树形图中项目的数组层次结构吗？

Question

我想使用plotly.js的树状图功能，但在阅读文档后我仍然不明白如何自定义项目层次结构。

在我看来，我想象用代码表达的树层次结构如下:

{
   parent:{ "topItem"},
   topItem: {"one","two","three"},   /* children of top-item */
   one:{"something"},   /* child of "one" */
   two: {"thing", "whatever"} /* a couple of children of "two" */

} 

我知道有更好的方法可以做到这一点，但我的观点是这种风格映射到我对数据嵌套关系的看法。

在plotly.js树形图示例代码中，数据和渲染输出之间的关系让我感到困惑，我不明白如何思考它。

示例使用几个数组来表达嵌套项关系，它们通常如下所示:

data = [{
      type: "treemap",
      labels: ["Eve", "Cain", "Seth", "Enos", "Noam", "Abel", "Awan", "Enoch", "Azura"],
      parents: ["", "Eve", "Eve", "Seth", "Seth", "Eve", "Eve", "Awan", "Eve" ]
}]

Plotly.newPlot('myDiv', data)

此示例呈现此处显示的层次结构:https://plotly.com/javascript/treemaps/

如果我想将三个 child 添加到“Cain” block (或任何其他与此相关的更改)，我不知道如何做到这一点，我想学习。

谢谢。

Answer 1

我将以像您这样的 JSON 层次结构为例:

{
    "root": { "topItem" },
    "topItem": { "one", "two", "three" },
    "one": { "something" },
    "two": { "thing", "whatever" }
}

首先，将要渲染的所有元素放入标签数组中，只需将它们一个接一个地列出即可:

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

然后，对于 labels 中的每个元素，您必须在层次结构中指定其父元素。 labels[0] 称为 root 并且它没有父级，因此我们保留 parents[0] = ""。 labels[1] 是 topItem，根据 JSON，它的父级是 root，所以 parents[1] = "root"。 labels[2]、labels[3] 和 labels[4](“一”、“二”、“三”)都有相同的父项，因此 parents[2] =parents[3] =parents[4] = "topItem"，依此类推。 你最终会得到

parents: ["", "root", "topItem", "topItem", "topItem", "one", "two", "two" ]

请参阅下面的示例:

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 src="https://cdn.plot.ly/plotly-2.20.0.min.js"></script>

<div id='chart'></div>