Plotly.js サンバースト チャートの状態変化を判断する

Question

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用の他のライブラリがある場合は、提案を歓迎します。

Answer 1

この場合、クリック イベントは最終的に「スイッチ」と同様の動作をトリガーします。

デフォルトでは、階層のルート ノードとすべての子ノードが表示されます。

• 少なくとも 1 つの子ノード (例: 「A」) を持つリングをクリックすると、親ノード (「ルート」) と兄弟ノード (「B」) が除外され、リングが新しい For として視覚的に扱われます。ルート ノードでは、リングの下の階層のみが表示されます (つまり、リング フィルタリング スイッチがオンになり、イベント データの属性 nextLevel がそれに応じて「A」に設定されます。たとえば、「A」は新しいルート ノードです")。

• リング (一番内側のリング) を再度クリックすると、フィルターがオフになり、親ノードと兄弟ノードが再表示されます。nextLevel は「ルート」に設定されます。

• 子ノードのないリング (例: 「a」 または 「B」) をクリックしても効果がないため、この場合 nextLevel は未定義です。

実際、属性 nextLevel は状態の変化を反映しています。

ここで、クリック ハンドラーで何が起こっているかをよりよく理解するために、currentpath (または一貫性を保つために、わずかに調整したバージョン) と nextLevel の存在を確認するとよいでしょう。 /価値： ＃＃＃ リーリー