Plotly React在重新渲染之间保持缩放和旋转

问题描述

我使用React.plot.ly版本来绘制3D散点图，但是每次我重新渲染组件时，该图都会重置为其默认配置。

如何防止这种情况并保持缩放/旋转配置？

下面是一个最小的代码示例。要再次重申，如何保存缩放和旋转以及如何在绘图上进行设置？

setPlotData() {
    const points = {
        1: {x: 1,y: 1,z: 1},2: {x: 2,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 轴参数