Dash+Plotly 使用 imshow 在两个绘图之间同步缩放和平移

Question

我尝试在仪表板中的两个图表之间同步缩放和平移（dash + plotly）。当我放大图表时，我得到了奇怪的行为，第二个图表没有更新。我需要放大第二个图表以使两个图表都更新，但不能使用相同的缩放比例或图表上的相同位置。此外，两个图形的形状发生了变化。

下面是我所在的代码。我看不出我做错了。

import os

from dash import Dash, html, dcc, Input, Output, State
import plotly.express as px
import numpy as np
import rasterio as rio

app2 = Dash(__name__)

data_folder = r'.\data'
store = {}

for filename in os.listdir(data_folder):
    if os.path.isfile(os.path.join(data_folder, filename)):
        band_name = filename.replace('.', '_').split(sep='_')[-2]
        with rio.open(os.path.join(data_folder, filename)) as dataset:
            nb_band = dataset.count
            if nb_band == 1:
                data = dataset.read(1)
            else:
                data = dataset.read(tuple(range(1, nb_band + 1)))

            if band_name == 'triband':
                data = np.swapaxes(data, 2, 0)
                data = np.swapaxes(data, 0, 1)
                store[band_name] = data.astype(float)
            else:
                store[f'B{band_name}'] = data.astype(float)

fig1 = px.imshow(store['triband'])
fig1.update_xaxes(showticklabels=False, showgrid=False, zeroline=False)
fig1.update_yaxes(showticklabels=False, showgrid=False, zeroline=False)
fig1.update_layout(
    margin=dict(l=0, r=0, t=0, b=0),
    plot_bgcolor='rgba(0, 0, 0, 0)',
    paper_bgcolor='rgba(0, 0, 0, 0)',
)


# Application structure and content
app2.layout = html.Div(className='main', children=[
    html.H1(children='Hello Dash', style={'padding': 10}),

    html.Div(children=[

        html.Div(children=[
            dcc.Graph(
                id='graph1',
                figure=fig1,
                responsive=True
            )
        ], style={'padding': 5, 'flex': 1}),

        html.Div(children=[
            dcc.Graph(
                id='graph2',
                figure=fig1,
                responsive=True
            )
        ], style={'padding': 5, 'flex': 1})

    ], style={'display': 'flex', 'flex-direction': 'row'}),
])


@app2.callback(Output('graph2', 'figure'),
               Input('graph1', 'relayoutData'),
               State('graph2', 'figure'))
def graph_event1(select_data, fig):
    if select_data is not None:
        try:
            fig['layout']['xaxis']['range'] = [select_data['xaxis.range[0]'], select_data['xaxis.range[1]']],
            fig['layout']['yaxis']['range'] = [select_data['yaxis.range[0]'], select_data['yaxis.range[1]']]
        except KeyError:
            pass
    return fig


@app2.callback(Output('graph1', 'figure'),
               Input('graph2', 'relayoutData'),
               State('graph1', 'figure'))
def graph_event2(select_data,  fig):
    if select_data is not None:
        try:
            fig['layout']['xaxis']['range'] = [select_data['xaxis.range[0]'], select_data['xaxis.range[1]']],
            fig['layout']['yaxis']['range'] = [select_data['yaxis.range[0]'], select_data['yaxis.range[1]']]
        except KeyError:
            pass
    return fig


if __name__ == '__main__':
    app2.run_server(debug=True)

Answer 1

我找到了一个解决方案：我没有创建两个图，而是创建了一个包含多个子图的图，并在子图之间强制缩放和平移。

fig = make_subplots(rows=1, cols=3, shared_xaxes=True, shared_yaxes=True)
fig.add_trace(
    px.imshow(store['triband']).data[0],
    row=1, col=1
)

fig.add_trace(
    px.imshow(index_store['NDVI']).data[0],
    row=1, col=2
)

fig.add_trace(
    px.imshow(np.where(index_store['NDVI'] >= np.median(index_store['NDVI']),
                       0.8 * np.max(index_store['NDVI']),
                       0.8 * np.min(index_store['NDVI']))
              ).data[0],
    row=1, col=3
)

fig.update_xaxes(matches='x', showticklabels=False, showgrid=False, zeroline=False)
fig.update_yaxes(matches='y', showticklabels=False, showgrid=False, zeroline=False)