Dash/Plotly移动端（Android/iOS）3D图表相机更新即重置问题咨询

在使用Dash + Plotly开发带3D图表的应用时，桌面端通过uirevision="lock"或读取relayoutData['scene.camera']可正常保留相机视角，但在Android/iOS移动端浏览器中，图表更新后缩放/平移状态会丢失。

核心解决思路：持久化存储相机状态 #

移动端浏览器对relayoutData的处理逻辑与桌面端存在差异，临时读取的方式无法稳定获取最新相机状态。改用dcc.Store持久化存储相机参数，确保每次图表更新时都能加载正确的视角配置。

步骤1：添加状态存储组件 #

在应用布局中加入dcc.Store用于保存相机状态：

dcc.Store(id='camera-state-store', data={})

步骤2：实时保存相机状态到Store #

创建回调监听图表的relayoutData事件，将相机参数实时存入Store：

@app.callback(
    Output('camera-state-store', 'data'),
    Input('your-3d-graph', 'relayoutData'),
    State('camera-state-store', 'data'),
    prevent_initial_call=True
)
def persist_camera_state(relayout_data, stored_state):
    if relayout_data and 'scene.camera' in relayout_data:
        # 完整更新相机属性，避免部分参数丢失
        stored_state.update(relayout_data['scene.camera'])
    return stored_state

步骤3：更新图表时加载保存的相机状态 #

在更新图表的回调中，从Store读取相机参数并赋值给布局：

@app.callback(
    Output('your-3d-graph', 'figure'),
    Input('filter-control', 'value'),  # 你的数据过滤/更新触发源
    State('camera-state-store', 'data'),
    # 其他必要的State参数（如数据集、立方体配置等）
)
def update_3d_graph(filter_value, stored_camera):
    # 1. 处理数据过滤或新增数据点逻辑
    processed_data = get_filtered_data(filter_value)
    
    # 2. 构建布局并加载保存的相机状态
    scene_config = dict(
        xaxis=dict(title='Conductivity'),
        yaxis=dict(title='Temperature'),
        zaxis=dict(title='pH'),
        # 若有存储的相机状态则使用，否则用默认配置
        camera=stored_camera if stored_camera else {}
    )
    
    layout = go.Layout(
        scene=scene_config,
        margin=dict(l=0, r=0, b=0, t=40),
        dragmode='lasso',
        uirevision='lock'  # 保留桌面端兼容逻辑
    )
    
    # 3. 创建图表并添加立方体覆盖层
    fig = go.Figure(data=processed_data, layout=layout)
    fig.add_trace(get_cube_overlay())  # 你的立方体添加逻辑
    
    return fig

额外优化建议 #

• 升级Plotly版本：使用最新版的plotly.py和dash，部分移动端兼容性问题已在新版本中修复
• 完整保留相机属性：移动端对相机的eye、center、up等子属性完整性要求更高，避免只保存部分参数
• 局部更新图表：若仅需更新数据点而非布局，可尝试通过patch方法局部更新，减少重渲染对相机状态的影响

内容的提问来源于stack exchange，提问作者Brell