<p>J'ai une application React dans laquelle j'utilise plotly.js pour afficher un graphique sunburst. J'ai d'autres actions/composants qui changent en fonction de « l'état de zoom » du graphique sunburst. Par exemple, si je fais un zoom arrière complet, le graphique en rafale affiche 4 cercles concentriques. Si je clique sur le deuxième cercle à partir du centre, il effectue un zoom avant et il n'y a alors que 3 cercles concentriques. Je pensais pouvoir déterminer le statut via un gestionnaire de clics, mais cela ne semble pas simple. </p> <p>L'état qui m'intéresse est en fait ce qui est visible et à quelle profondeur (combien de cercles concentriques y a-t-il). </p> <p>J'espérais trouver des rappels ou quelque chose qui reflète l'état, mais tout ce que j'ai trouvé était un gestionnaire de clics pour le graphique sunburst (référence 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>Le problème est qu'il est difficile de déduire l'état à partir des clics. Cliquer sur un paragraphe change d'état de différentes manières. Si je clique sur le paragraphe le plus à l’extérieur, cela ne change pas du tout d’état. Si je clique sur le cercle le plus intérieur, il peut effectuer un zoom avant ou arrière en fonction du paragraphe actuellement affiché dans le cercle le plus intérieur. </p> <p> Quelqu'un sur codepen a un exemple basé sur ce code : </p> <pre class="brush:php;toolbar:false;">Plotly.newPlot('graph', [{ tapez : 'soleil', parents : ['', 'Root', 'Root', 'A'], étiquettes : ['Racine', 'A', 'B', 'a'] }]).then(gd => { gd.on('plotly_sunburstclick', console.log) })</pré> <p>Si vous y allez et cliquez sur « A », vous entrerez dans un état où « A » est le cercle central et « a » est le cercle extérieur. Si vous cliquez à nouveau sur « A », vous obtiendrez « racine » comme cercle central. Pour le gestionnaire de clics, les deux clics se ressemblent fondamentalement, mais le statut résultant (qui est la partie qui m'intéresse) est différent. Dans mon cas, j'ai essayé quelques heuristiques pour déduire s'il s'agissait d'une augmentation ou d'une diminution, mais rien de ce que j'ai essayé n'a fonctionné de manière cohérente. </p> <p>J'ai cherché une solution, mais la chose la plus proche que j'ai trouvée jusqu'à présent est un gestionnaire de clics qui, après quelques efforts, n'a pas résolu mon problème. S'il y a déjà une réponse, c'est très bien, mais ne marquez pas trop rapidement une question comme doublon sans être sûr qu'elle a déjà été résolue. Je vois beaucoup de questions marquées comme doublons où les réponses mentionnées ne répondent pas réellement à la nouvelle question, tandis que la discussion et toute tentative de réponse à la question réelle sont effectivement fermées. </p> <p> Je dois ajouter que je ne dois pas nécessairement utiliser plotly.js, et s'il existe d'autres bibliothèques pour React qui pourraient résoudre mon problème, je suis ouvert aux suggestions. </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) // 如果有的话，新根节点的标签
  })
})