確定Plotly.js Sunburst圖表的狀態變化

Question

我有一個React應用程序，在其中使用plotly.js來顯示一個旭日圖表。我有其他的操作/組件，根據旭日圖表的“縮放狀態”來改變。例如，如果我完全縮小，爆發圖表顯示4個同心圓。如果我點擊離中心第二個圓，它會放大，然後只有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', [{
  type: 'sunburst',
  parents: ['', 'Root', 'Root', 'A'],
  labels: ['Root', 'A', 'B', 'a']
}]).then(gd => {
  gd.on('plotly_sunburstclick', console.log)
})

如果你去那裡並點擊'A'，你會進入'A'是中心圓，'a'是外圈的狀態。如果你再點擊'A'，那麼你會得到'root'作為中心圓。對於點擊處理程序來說，這兩個點擊看起來基本上相同，但是結果狀態（這是我關心的部分）是不同的。在我的情況下，我嘗試了一些啟發式方法來推斷它是放大還是縮小，但是我嘗試過的方法都沒有一致地起作用。

我已經搜尋了解決方案，但到目前為止，我找到的最接近的東西是點擊處理程序，經過一些努力後，它並沒有解決我的問題。如果已經有答案，那就太好了，但請不要過於迅速地將問題標記為重複，而不確定它是否已經解決。我看到很多問題被標記為重複，而所提到的答案實際上並沒有解決新問題，同時討論和任何試圖回答實際問題的嘗試都被有效地關閉了。

我應該補充一點，我不一定要使用plotly.js，如果有其他適用於React的函式庫可以解決我的問題，我願意聽取建議。

Answer 1

在這種情況下，點擊事件最終觸發的是類似於「開關」的行為。

預設情況下，我們看到根節點和層次結構的所有子節點。

• 點擊至少有一個子節點的環（例如'A'），會過濾掉其父節點（'Root'）和兄弟節點（'B'），並將該環視覺上作為新的根節點，我們只看到該環下的層次結構（即環過濾開關打開，事件資料中的屬性nextLevel相應地設定為'A'，如“A是新的根節點”） 。

• 再次點擊該環 - 現在是最內層的圓環 - 關閉過濾器，父節點和兄弟節點重新出現，nextLevel設定為'Root'。

• 點選沒有子節點的環（例如'a'或'B'）沒有效果，因此在這種情況下nextLevel未定義。

實際上，屬性nextLevel反映了狀態的變化。

現在為了更好地理解點擊處理程序中發生的情況，您可能想要檢查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) // 如果有的话，新根节点的标签
  })
})