Déterminer les changements d'état du graphique Sunburst de Plotly.js

Question

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.

L'état qui m'intéresse est en fait ce qui est visible et à quelle profondeur (combien de cercles concentriques y a-t-il).

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)

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.

Quelqu'un sur codepen a un exemple basé sur ce code :

Plotly.newPlot('graph', [{
  tapez : 'soleil',
  parents : ['', 'Root', 'Root', 'A'],
  étiquettes : ['Racine', 'A', 'B', 'a']
}]).then(gd => {
  gd.on('plotly_sunburstclick', console.log)
})
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. 
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. 
 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. 
            

Answer 1

Dans ce cas, l'événement click déclenche finalement un comportement similaire à un "switch".

Par défaut, nous voyons le nœud racine et tous les nœuds enfants de la hiérarchie.

• Cliquer sur un anneau avec au moins un nœud enfant (par exemple « A ») filtrera son nœud parent (« Racine ») et son nœud frère (« B ») et traitera visuellement l'anneau comme le nouveau nœud racine, nous seulement la hiérarchie sous l'anneau est visible (c'est-à-dire que le commutateur de filtrage en anneau est activé et l'attribut nextLevel dans les données d'événement est défini sur « A » en conséquence, par exemple « A est le nouveau nœud racine »).

• Cliquer à nouveau sur l'anneau - maintenant l'anneau le plus intérieur - désactive le filtre et les nœuds parents et frères réapparaissent, nextLevelréglés sur « Root ».

• Cliquer sur un anneau sans nœud enfant (par exemple « a » ou « B ») n'a aucun effet, donc dans ce cas nextLevel n'est pas défini.

En fait, les propriétés nextLevel reflètent les changements d'état.

Maintenant, pour mieux comprendre ce qui se passe dans le gestionnaire de clics, vous souhaiterez peut-être vérifier currentpath (ou une version légèrement modifiée pour plus de cohérence) et la présence/valeur de 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) // 如果有的话，新根节点的标签
  })
})