<p>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. </p> <p>Keadaan yang saya minati sebenarnya ialah apa yang boleh dilihat dan sejauh mana kedalaman (berapa banyak bulatan sepusat yang ada). </p> <p>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)</p> <p>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. </p> <p> Seseorang di codepen mempunyai contoh berdasarkan kod ini: </p> <pre class="brush:php;toolbar:false;">Plotly.newPlot('graph', [{ jenis: 'sunburst', ibu bapa: ['', 'Akar', 'Akar', 'A'], label: ['Root', 'A', 'B', 'a'] }]).kemudian(gd => { gd.on('plotly_sunburstclick', console.log) })</pre> <p>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. </p> <p>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. </p> <p> 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. </p>

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) // 如果有的话，新根节点的标签
  })
})