我正在使用 plot.ly 的 React 版本来渲染 3D 散点图,但是每次我重新渲染我的组件时,该图都会重置为其默认配置。
如何防止这种情况并保持缩放/旋转配置?
下面是一个最小的代码示例。再次重申,如何保存缩放和旋转,以及如何在绘图上设置它?
setPlotData() {
const points = {
1: {x: 1, y: 1, z: 1},
2: {x: 2, y: 1, z: 1},
3: {x: 3, y: 2, z: 1}
}
const x=[], y=[], z=[]
Object.keys(points).forEach((key, index) => {
x.push(points[key].x); y.push(points[key].y); z.push(points[key].z)
})
const data1 = {
x: x, y: y, z: z,
mode: "markers",
marker: {
color: "rgb(16, 52, 166)",
size: 4,
symbol: "circle",
opacity: 1
},
type: "scatter3d"
}
this.setState({
scatterPlotData: [data1]
})
}
render() {
return(
<Plot
data={this.state.scatterPlotData}
layout={{
autosize: true,
l: 0, r: 0, b: 0, t: 0, pad: 0,
showlegend: false,
margin:{l:0,r:0,b:0,t:0}
}}
style={{ width: '100%', height: '100%' }}
/>
)
}
最佳答案
更新布局以添加 urevision 参数
layout={{
autosize: true,
l: 0, r: 0, b: 0, t: 0, pad: 0,
showlegend: false,
margin:{l:0,r:0,b:0,t:0},
xaxis: {
uirevision: 'time',
},
yaxis: {
uirevision: 'time',
},
}}
您可以更改 uirevision: "time"
到您使用的任何 x,y 轴参数
关于reactjs - Plotly React 在重新渲染之间保持缩放和旋转,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/63519850/