第七色在线视频,2021少妇久久久久久久久久,亚洲欧洲精品成人久久av18,亚洲国产精品特色大片观看完整版,孙宇晨将参加特朗普的晚宴

為了賬號安全,請及時綁定郵箱和手機(jī)立即綁定
已解決430363個問題,去搜搜看,總會有你想問的

如何訪問和控制 React 中 plotly.js 旭日形圖表中的選定部分

如何訪問和控制 React 中 plotly.js 旭日形圖表中的選定部分

HUX布斯 2023-03-03 16:09:42
我的 React 應(yīng)用程序中有一個陰謀的旭日圖(只是一個簡單的<plot> React 組件)。默認(rèn)情況下,Plotly 允許用戶通過單擊圖表段來放大較低級別(請參見第一個鏈接進(jìn)行演示)。當(dāng)用戶單擊它時(同時保持圖表的默認(rèn)縮放行為),我想在頁面其他地方顯示有關(guān)“選定”部分的一些上下文數(shù)據(jù)。在 React 中解決此類問題的慣用方法是使用受控組件,其中 React 指示組件在渲染時的狀態(tài),而不是組件管理狀態(tài)本身(正如 Plotly 目前默認(rèn)所做的那樣)。這將是理想的,因為將來我想將狀態(tài)存儲在 URL 中,以便可以生成指向特定項目的鏈接。這似乎需要:禁用默認(rèn)點(diǎn)擊行為單擊片段時將所選項目存儲在 React 狀態(tài)(或其他位置)每次渲染圖表時將選擇傳回 Plotly...但是在 Plotly 參考文檔中似乎沒有關(guān)于如何執(zhí)行這些操作的任何信息。
查看完整描述

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>

}


查看完整回答
反對 回復(fù) 2023-03-03
  • 1 回答
  • 0 關(guān)注
  • 168 瀏覽
慕課專欄
更多

添加回答

舉報

0/150
提交
取消
微信客服

購課補(bǔ)貼
聯(lián)系客服咨詢優(yōu)惠詳情

幫助反饋 APP下載

慕課網(wǎng)APP
您的移動學(xué)習(xí)伙伴

公眾號

掃描二維碼
關(guān)注慕課網(wǎng)微信公眾號