Bestimmen Sie Zustandsänderungen des Sunburst-Diagramms von Plotly.js

Question

Ich habe eine React-Anwendung, in der ich plotly.js verwende, um ein Sunburst-Diagramm anzuzeigen. Ich habe andere Aktionen/Komponenten, die sich basierend auf dem „Zoomstatus“ des Sunburst-Diagramms ändern. Wenn ich beispielsweise vollständig herauszoome, zeigt das Burst-Diagramm vier konzentrische Kreise. Wenn ich von der Mitte aus auf den zweiten Kreis klicke, wird er vergrößert und es sind dann nur noch 3 konzentrische Kreise vorhanden. Ich dachte, ich könnte den Status über einen Click-Handler ermitteln, aber das scheint nicht einfach zu sein.

Der Zustand, der mich interessiert, ist eigentlich, was sichtbar ist und in welcher Tiefe (wie viele konzentrische Kreise es gibt).

Ich hatte gehofft, ein paar Rückrufe oder etwas zu finden, das den Zustand widerspiegelt, aber alles, was ich gefunden habe, war ein Click-Handler für das Sunburst-Diagramm (Referenz 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)

Das Problem besteht darin, dass es schwierig ist, aus Klicks auf den Status zu schließen. Durch Klicken auf einen Absatz ändert sich der Status auf unterschiedliche Weise. Wenn ich auf den äußersten Absatz klicke, ändert sich der Status überhaupt nicht. Wenn ich auf den innersten Kreis klicke, wird er möglicherweise vergrößert oder verkleinert, je nachdem, welcher Absatz gerade im innersten Kreis angezeigt wird.

Jemand auf Codepen hat ein Beispiel, das auf diesem Code basiert:

Plotly.newPlot('graph', [{
  Typ: 'Sunburst',
  Eltern: ['', 'Root', 'Root', 'A'],
  Etiketten: ['Root', 'A', 'B', 'a']
}]).then(gd => {
  gd.on('plotly_sunburstclick', console.log)
})

Wenn Sie dorthin gehen und auf „A“ klicken, gelangen Sie in einen Zustand, in dem „A“ der mittlere Kreis und „a“ der äußere Kreis ist. Wenn Sie erneut auf „A“ klicken, erhalten Sie „Wurzel“ als Mittelkreis. Für den Klickhandler sehen die beiden Klicks grundsätzlich gleich aus, aber der resultierende Status (der Teil, der mir wichtig ist) ist unterschiedlich. In meinem Fall habe ich einige Heuristiken ausprobiert, um abzuleiten, ob es sich um eine Vergrößerung oder Verkleinerung handelt, aber nichts, was ich ausprobiert habe, hat konsistent funktioniert.

Ich habe nach einer Lösung gesucht, aber das nächste, was ich bisher gefunden habe, ist ein Click-Handler, der mein Problem nach einiger Mühe nicht lösen konnte. Wenn es bereits eine Antwort gibt, ist das großartig, aber markieren Sie eine Frage bitte nicht zu schnell als Duplikat, ohne sicher zu sein, ob sie bereits gelöst wurde. Ich sehe viele Fragen als Duplikate markiert, deren Antworten sich nicht wirklich auf die neue Frage beziehen, während die Diskussion und jeder Versuch, die eigentliche Frage zu beantworten, praktisch abgeschlossen sind.

Ich sollte hinzufügen, dass ich plotly.js nicht unbedingt verwenden muss, und wenn es andere Bibliotheken für React gibt, die mein Problem lösen könnten, bin ich offen für Vorschläge.

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) // 如果有的话，新根节点的标签
  })
})