确定Plotly.js Sunburst图表的状态变化

Question

我有一个React应用程序，在其中使用plotly.js来显示一个旭日图表。我有其他的操作/组件，根据旭日图表的“缩放状态”来改变。例如，如果我完全缩小，爆发图表显示4个同心圆。如果我点击离中心第二个圆，它会放大，然后只有3个同心圆。我以为我可以通过点击处理程序来确定状态，但这似乎并不直接。

我感兴趣的状态实际上是哪些东西可见，以及深度是多少（有多少个同心圆）。

我希望能找到一些反映状态的回调或其他东西，但我找到的只有一个用于旭日图表的点击处理程序（参考https://github.com/plotly/react-plotly.js/blob/master/README.md#event-handler-props - onSunburstClick，https://community.plotly.com/t/capturing-sunburst-on-click-events/32171）

问题是，很难根据点击来推断状态。点击一个段落会以不同的方式改变状态。如果我点击最外层的段落，它根本不会改变状态。如果我点击最内层的圆，它可能会放大或缩小，这取决于当前在最内层圆中显示的段落。

有人在codepen上基于这段代码有一个例子：

Plotly.newPlot('graph', [{
  type: 'sunburst',
  parents: ['', 'Root', 'Root', 'A'],
  labels: ['Root', 'A', 'B', 'a']
}]).then(gd => {
  gd.on('plotly_sunburstclick', console.log)
})

如果你去那里并点击'A'，你会进入'A'是中心圆，'a'是外圈的状态。如果你再次点击'A'，那么你会得到'root'作为中心圆。对于点击处理程序来说，这两个点击看起来基本相同，但是结果状态（这是我关心的部分）是不同的。在我的情况下，我尝试了一些启发式方法来推断它是放大还是缩小，但是我尝试过的方法都没有一致地起作用。

我已经搜索了解决方案，但到目前为止，我找到的最接近的东西是点击处理程序，经过一些努力后，它并没有解决我的问题。如果已经有答案，那就太好了，但是请不要过于迅速地将问题标记为重复，而不确定它是否已经解决。我看到很多问题被标记为重复，而所提到的答案实际上并没有解决新问题，同时讨论和任何试图回答实际问题的尝试都被有效地关闭了。

我应该补充一点，我不一定非要使用plotly.js，如果有其他适用于React的库可以解决我的问题，我愿意听取建议。

Answer 1

在这种情况下，点击事件最终触发的是类似于“开关”的行为。

默认情况下，我们看到根节点和层次结构的所有子节点。

• 点击至少有一个子节点的环（例如'A'），会过滤掉其父节点（'Root'）和兄弟节点（'B'），并将该环视觉上作为新的根节点，我们只看到该环下的层次结构（即环过滤开关打开，事件数据中的属性nextLevel相应地设置为'A'，如“A是新的根节点”）。

• 再次点击该环 - 现在是最内层的圆环 - 关闭过滤器，父节点和兄弟节点重新出现，nextLevel设置为'Root'。

• 点击没有子节点的环（例如'a'或'B'）没有效果，因此在这种情况下nextLevel未定义。

实际上，属性nextLevel反映了状态的变化。

现在为了更好地理解点击处理程序中发生的情况，您可能想要检查currentpath（或为了一致性，稍微调整过的版本）以及nextLevel的存在/值：

Plotly.newPlot('graph', [{
  type: 'sunburst',
  parents: ['', 'Root', 'Root', 'A'],
  labels: ['Root', 'A', 'B', 'a']
}]).then(gd => {
  gd.on('plotly_sunburstclick', data => {
    const pt = data.points[0]
    const path = ((pt.currentPath ?? '/') + pt.label).replace('Root', '')
    console.log('path:', path)                // 点击元素的路径
    console.log('nextLevel:', data.nextLevel) // 如果有的话，新根节点的标签
  })
})