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

Posted 2023-02-18

【中文标题】Plotly React 在重新渲染之间保持缩放和旋转

【英文标题】：Plotly React keep zoom and rotation between re-rendering

【发布时间】：2020-12-10 15:54:03

【问题描述】：

我正在使用 React 版本的 plot.ly 来渲染 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%' 
        />
    )

【参考方案1】：

更新布局以添加 uirevision 参数

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 轴参数