冻结 plotly-dash 图形可视化

Question

我正在开发 dash 应用程序，这是我的代码：

import numpy as np
import dash
import dash_core_components as dcc
import dash_html_components as html
from dash.dependencies import Input, Output
import plotly.graph_objs as go

blue = '#6683f3'
orange = '#ff9266'
grey = '#e0e1f5'
black = '#212121'

app = dash.Dash()

app.layout = html.Div([html.Div([dcc.RadioItems(id = 'radio-item',
                                                options = [dict(label = 'squared',
                                                                value = '2'),
                                                           dict(label = 'cubed',
                                                                value = '3')],
                                                value = '2',
                                                labelStyle = {'display': 'block'})]),

                       html.Div(dcc.Graph(id = 'graph',
                                          figure = dict(data = [],
                                                        layout = go.Layout(plot_bgcolor = black)),
                                          style = dict(height = 1000)))])


@app.callback(Output('graph', 'figure'),
              [Input('radio-item', 'value')])
def update_graph(value):

    x = np.linspace(0, 10, 100)
    y = np.linspace(0, 10, 100)
    XX, YY = np.meshgrid(x, y)

    Z1 = XX ** int(value) * YY
    Z2 = XX ** int(value) / YY

    data = [go.Contour(z = Z1,
                       name = f'Z1',
                       zmin = 0,
                       zmax = 100,
                       contours_coloring = 'lines',
                       line_width = 2,
                       showscale = False,
                       showlegend = True,
                       visible = True,
                       colorscale = [[0, orange], [1, orange]],
                       ncontours = 21,
                       contours = dict(showlabels = True,
                                       labelformat = '.0f')),

            go.Contour(z = Z2,
                       name = f'Z2',
                       zmin = 0,
                       zmax = 100,
                       contours_coloring = 'lines',
                       line_width = 2,
                       showscale = False,
                       showlegend = True,
                       visible = True,
                       colorscale = [[0, blue], [1, blue]],
                       ncontours = 21,
                       contours = dict(showlabels = True,
                                       labelformat = '.0f'))]

    layout = go.Layout(plot_bgcolor = black,
                       hovermode = 'x unified')

    figure = go.Figure(data = data, layout = layout)

    figure.update_xaxes(title_text = 'X',
                        linewidth = 1,
                        nticks = 11,
                        gridwidth = 0.5,
                        gridcolor = grey,
                        tickformat = '.0f')

    figure.update_yaxes(title_text = 'Y',
                        linewidth = 1,
                        nticks = 11,
                        gridwidth = 0.5,
                        gridcolor = grey,
                        tickformat = '.0f')

    figure.update_layout(legend = dict(itemsizing = 'constant'))

    return figure


if __name__ == "__main__":
    app.run_server()

此代码生成一个图表和一个带有两个选项的 RadioItems。通过 update_graph 函数，图表的内容会相应地更新为 RadioItems 选定的选项。到目前为止一切顺利。
当我 zoom/pan 图形然后更改 RadioItems 选项时出现问题：图形已正确更新但它丢失了我之前制作的 zoom/pan。同样的问题，如果我 show/hide 两条轨迹之一然后我更改 RadioItems 选项：图形已更新但轨迹的可视化选项已重置。
这种行为是由于我的代码造成的：当用户更改 RadioItems 选项时，它被称为重置图形的函数 update_graph，因此像 pan/zoom 或 [=35= 这样的属性] 跟踪选项丢失。
我想冻结这些可视化选项，以便当用户 pans/zooms 然后他更改 RadioItems 选项时，图表会正确更新但它会保留 pan/zoom用户之前发的。跟踪 hide/show 选项也是如此。
我认为有一种方法可以将当前显示区域保存在一个变量中，将痕迹的可见性保存在另一个变量中，并在 update_graph 中调用此变量，但我不知道如何保存和调用这些属性。

版本信息：

Python                  3.7.0
dash                    1.12.0
dash-core-components    1.10.0
dash-html-components    1.0.3
dash-renderer           1.4.1
plotly                  4.8.1

Answer 1

我相信你要找的是uirevision属性（详情见the documentation）。要保持缩放和平移等，请在更新图形时设置此属性，即

fig['layout']['uirevision'] = 'something'

设置什么并不重要（可以使用数字、字符串等），重要的是值在后续更新期间保持不变（您不想保持缩放、平移等）。每当您需要重置视图时，将值更改为其他值，例如

fig['layout']['uirevision'] = 42

冻结 plotly-dash 图形可视化

Freeze plotly-dash graph visualization

python

visualization

zooming

plotly

plotly-dash