1 回答

TA貢獻(xiàn)1810條經(jīng)驗 獲得超4個贊
可以使用該事件監(jiān)視縮放行為plotly-sunburstclick。使用反應(yīng)<plot>組件時,可以使用onSunburstClick(掛起的拉取請求)對其進(jìn)行監(jiān)視。
將導(dǎo)航到的段的 ID 作為屬性在事件數(shù)據(jù)中nextLevel ,可用于驅(qū)動 React 行為(例如使用useState)。請注意,使用此屬性很重要,而不是單擊段的 ID,因為單擊中心段時,圖表實際上將向上導(dǎo)航到父級。
要開始將縮放級別完全置于 React 的控制之下,請false從 sunburstclick 事件處理程序返回。這將阻止 plotly 執(zhí)行縮放本身。請注意,這也會阻止常規(guī)onClick/plotly_click觸發(fā)。
onSunburstClick={(event) => {
doSomethingWith(event.nextLevel)
return false
}}
level然后,您可以通過設(shè)置旭日軌跡的 屬性來手動設(shè)置縮放級別data。
data={[{
...,
level: /*Level from props or state*/,
...
}]}
縮放現(xiàn)在完全由 React 管理,就好像它是一個受控組件一樣,但缺少最后一部分;縮放級別立即改變,沒有平滑的過渡動畫。transition這可以通過在 中手動指定 a 來解決layout,按照這個拉取請求。
layout={{
...,
transition: {
duration: 1000,
easing: 'cubic-in-out'
},
...
}}
這是一個完整的示例,將縮放存儲在組件狀態(tài)中,以便可以顯示當(dāng)前 id
const MySunburst = () => {
const [selected, setSelected] = useState('default id here, usually the root id')
return <div>
<span>Currently viewing: {selected}</span>
<Plot data={[{
type: "sunburst",
level: selected,
labels: // Some labels
ids: // Some ids
parents: // Some parents
}]} layout={{
transition: {
duration: 500,
easing: 'cubic-in-out'
}
}} onSunburstClick={(event) => {
setSelected(event.nextLevel)
return false
}}/>
<div>
}
添加回答
舉報