plotly.js を使用してサンバースト チャートを表示する React アプリケーションがあります。サンバースト チャートの「ズーム状態」に基づいて変化する他のアクション/コンポーネントがあります。たとえば、完全にズームアウトすると、バースト チャートに 4 つの同心円が表示されます。中心から 2 番目の円をクリックすると拡大され、同心円が 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', [{ タイプ: 'サンバースト'、 親: ['', 'ルート', 'ルート', 'A'], ラベル: ['ルート', 'A', 'B', 'a'] }]).then(gd => { gd.on('plotly_sunburstclick', console.log) })

そこに移動して「A」をクリックすると、「A」が中心円、「a」が外側の円の状態になります。もう一度「A」をクリックすると、中心円として「root」が表示されます。クリック ハンドラーにとって、2 つのクリックは基本的に同じように見えますが、結果のステータス (これが私が関心のある部分です) は異なります。私の場合、スケールアップしているのかスケールダウンしているのかを推測するためにいくつかのヒューリスティックを試してみましたが、どれも一貫して機能しませんでした。

解決策を探しましたが、これまでに見つけた最も近いものはクリック ハンドラーであり、いくら試しても問題は解決されませんでした。すでに回答がある場合は問題ありませんが、すでに解決されているかどうかを確認せずに、性急に質問を重複としてマークしないでください。多くの質問が重複としてマークされており、言及されている回答が実際には新しい質問に対応していない一方で、議論や実際の質問に回答しようとする試みは事実上終了しています。

必ずしもplotly.jsを使用する必要はないことを付け加えておきます。私の問題を解決できる可能性のあるReact用の他のライブラリがある場合は、提案を歓迎します。