首頁猿問如何訪問和控制 React 中...

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

JavaScript

HUX布斯 2023-03-03 16:09:42

我的 React 應用程序中有一個陰謀的旭日圖（只是一個簡單的<plot> React 組件）。默認情況下，Plotly 允許用戶通過單擊圖表段來放大較低級別（請參見第一個鏈接進行演示）。當用戶單擊它時（同時保持圖表的默認縮放行為），我想在頁面其他地方顯示有關“選定”部分的一些上下文數據。在 React 中解決此類問題的慣用方法是使用受控組件，其中 React 指示組件在渲染時的狀態，而不是組件管理狀態本身（正如 Plotly 目前默認所做的那樣）。這將是理想的，因為將來我想將狀態存儲在 URL 中，以便可以生成指向特定項目的鏈接。這似乎需要：禁用默認點擊行為單擊片段時將所選項目存儲在 React 狀態（或其他位置）每次渲染圖表時將選擇傳回 Plotly...但是在 Plotly 參考文檔中似乎沒有關于如何執行這些操作的任何信息。

查看完整描述

1 回答

慕萊塢森

TA貢獻1810條經驗獲得超4個贊

可以使用該事件監視縮放行為plotly-sunburstclick。使用反應<plot>組件時，可以使用onSunburstClick（掛起的拉取請求）對其進行監視。

將導航到的段的 ID 作為屬性在事件數據中nextLevel ，可用于驅動 React 行為（例如使用useState）。請注意，使用此屬性很重要，而不是單擊段的 ID，因為單擊中心段時，圖表實際上將向上導航到父級。

要開始將縮放級別完全置于 React 的控制之下，請false從 sunburstclick 事件處理程序返回。這將阻止 plotly 執行縮放本身。請注意，這也會阻止常規onClick/plotly_click觸發。

onSunburstClick={(event) => {

doSomethingWith(event.nextLevel)

return false

}}

level然后，您可以通過設置旭日軌跡的屬性來手動設置縮放級別data。

data={[{

...,

level: /*Level from props or state*/,

...

}]}

縮放現在完全由 React 管理，就好像它是一個受控組件一樣，但缺少最后一部分；縮放級別立即改變，沒有平滑的過渡動畫。transition這可以通過在中手動指定 a 來解決layout，按照這個拉取請求。

layout={{

...,

transition: {

duration: 1000,

easing: 'cubic-in-out'

...

}}

這是一個完整的示例，將縮放存儲在組件狀態中，以便可以顯示當前 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>

}

反對回復 2023-03-03

1 回答
0 關注
157 瀏覽

關注

添加回答

舉報

0/150

提交

取消

亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

熱搜

最近搜索清空

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

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

1 回答

添加回答