<p>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. </p> <p>Der Zustand, der mich interessiert, ist eigentlich, was sichtbar ist und in welcher Tiefe (wie viele konzentrische Kreise es gibt). </p> <p>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)</p> <p>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. </p> <p> Jemand auf Codepen hat ein Beispiel, das auf diesem Code basiert: </p> <pre class="brush:php;toolbar:false;">Plotly.newPlot('graph', [{ Typ: 'Sunburst', Eltern: ['', 'Root', 'Root', 'A'], Etiketten: ['Root', 'A', 'B', 'a'] }]).then(gd => { gd.on('plotly_sunburstclick', console.log) })</pre> <p>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. </p> <p>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. </p> <p> 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. </p>

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