Tentukan perubahan keadaan carta Plotly.js Sunburst

Question

Saya mempunyai aplikasi React di mana saya menggunakan plotly.js untuk memaparkan carta sunburst. Saya mempunyai tindakan/komponen lain yang berubah berdasarkan "keadaan zum" carta sunburst. Contohnya, jika saya zum keluar sepenuhnya, carta pecah menunjukkan 4 bulatan sepusat. Jika saya mengklik pada bulatan kedua dari tengah ia mengezum masuk dan kemudian hanya terdapat 3 bulatan sepusat. Saya fikir saya boleh menentukan status melalui pengendali klik, tetapi itu nampaknya tidak mudah.

Keadaan yang saya minati sebenarnya ialah apa yang boleh dilihat dan sejauh mana kedalaman (berapa banyak bulatan sepusat yang ada).

Saya berharap untuk mencari beberapa panggilan balik atau sesuatu yang menggambarkan keadaan, tetapi yang saya temui hanyalah pengendali klik untuk carta sunburst (rujukan 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)

Masalahnya ialah sukar untuk membuat kesimpulan keadaan daripada klik. Mengklik pada perenggan mengubah keadaan dalam cara yang berbeza. Jika saya klik pada perenggan paling luar, ia tidak mengubah keadaan sama sekali. Jika saya mengklik pada bulatan paling dalam, ia mungkin mengezum masuk atau keluar bergantung pada perenggan yang sedang dipaparkan dalam bulatan paling dalam.

Seseorang di codepen mempunyai contoh berdasarkan kod ini:

Plotly.newPlot('graph', [{
  jenis: 'sunburst',
  ibu bapa: ['', 'Akar', 'Akar', 'A'],
  label: ['Root', 'A', 'B', 'a']
}]).kemudian(gd => {
  gd.on('plotly_sunburstclick', console.log)
})

Jika anda pergi ke sana dan klik 'A', anda akan pergi ke keadaan di mana 'A' ialah bulatan tengah dan 'a' ialah bulatan luar. Jika anda klik pada 'A' sekali lagi, maka anda akan mendapat 'root' sebagai bulatan tengah. Bagi pengendali klik, kedua-dua klik pada dasarnya kelihatan sama, tetapi status yang terhasil (yang merupakan bahagian yang saya sayangi) adalah berbeza. Dalam kes saya, saya mencuba beberapa heuristik untuk membuat kesimpulan sama ada ia meningkat atau menurun, tetapi tiada apa yang saya cuba berjaya secara konsisten.

Saya telah mencari penyelesaian tetapi perkara paling dekat yang saya temui setakat ini ialah pengendali klik, yang selepas beberapa usaha tidak menyelesaikan masalah saya. Jika sudah ada jawapan, itu bagus, tetapi tolong jangan terlalu cepat untuk menandakan soalan sebagai pendua tanpa pasti sama ada ia sudah diselesaikan. Saya melihat banyak soalan ditandakan sebagai pendua di mana jawapan yang dinyatakan sebenarnya tidak menangani soalan baharu, manakala perbincangan dan sebarang percubaan untuk menjawab soalan sebenar ditutup dengan berkesan.

Saya harus menambah bahawa saya tidak semestinya perlu menggunakan plotly.js, dan jika terdapat perpustakaan lain untuk React yang mungkin menyelesaikan masalah saya, saya terbuka kepada cadangan.

Answer 1

Dalam kes ini, acara klik akhirnya mencetuskan gelagat yang serupa dengan "suis".

Secara lalai, kita melihat nod akar dan semua nod anak hierarki.

• Mengklik pada cincin dengan sekurang-kurangnya satu nod anak (cth. 'A') akan menapis nod induknya ('Root') dan nod adik beradik ('B') dan menganggap cincin itu sebagai nod akar baharu secara visual, kami Hanya hierarki di bawah gelang dilihat (iaitu suis penapisan gelang dihidupkan dan atribut nextLevel dalam data peristiwa ditetapkan kepada 'A' dengan sewajarnya, seperti "A ialah nod akar baharu").

• Mengklik pada cincin sekali lagi - kini cincin paling dalam - mematikan penapis dan nod ibu bapa dan adik-beradik muncul semula, nextLeveltetapkan kepada 'Root'.

• Mengklik pada cincin tanpa nod anak (cth. 'a' atau 'B') tidak mempunyai kesan, jadi dalam kes ini nextLevel tidak ditentukan.

Sebenarnya, hartanah nextLevel mencerminkan perubahan keadaan.

Kini untuk lebih memahami perkara yang berlaku dalam pengendali klik, anda mungkin ingin menyemak laluan semasa (atau versi yang diubah suai untuk konsistensi) dan kehadiran/nilai 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) // 如果有的话，新根节点的标签
  })
})