Dash中四个图形的同步缩放.如何实现?

Question

大家下午好!:)

有什么问题?我有4个地块，挑战是保持它们同步缩放(即，如果你放大一个地块，那么其他地块也会放大，等等)。

现在我所做的就是我可以放大一个特定的图形('graph1')，其余的也会随之放大。这就是它的样子。

@app.callback(
Output('graph1', 'figure'), Output('graph2', 'figure'), Output('graph3', 'figure'),Output('graph4', 'figure'),
Input('graph1', 'relayoutData'),
State('graph1', 'figure'), State('graph2', 'figure'), State('graph3', 'figure'), State('graph4', 'figure')
)
def zoom_event(relayout_data, *figures):
outputs = []
for fig in figures:
try:
fig['layout']["xaxis"]["range"] = [relayout_data['xaxis.range[0]'], relayout_data['xaxis.range[1]']]
fig['layout']["xaxis"]["autorange"] = False
except (KeyError, TypeError) as e:
fig['layout']["xaxis"]["autorange"] = True
outputs.append(fig)
return outputs

如果你试图做一些看起来像同步图表的事情，你会得到无数的错误。我试着画出两个有子图的图，甚至一个有4个子图的图，但都是徒劳的。

后者之一是输出接受的输入多于输出。但在这个错误中，我还没有明确指出。我试过了。

@app.callback(
Output('graph1', 'figure'), Output('graph2', 'figure'), Output('graph3', 'figure'), Output('graph4', 'figure'),
Input('graph1', 'relayoutData'), Input('graph2', 'relayoutData'), Input('graph3', 'relayoutData'), Input('graph4', 'relayoutData'), 
State('graph1', 'figure'), State('graph2', 'figure'), State('graph3', 'figure'), State('graph4', 'figure')
)

如果你敢帮忙，谢谢你。

对于搜索，我建议到这里Dygraphs -同步缩放

在这里，参与者解决了一个相当类似的问题(但它是用javascript编写的，我很高兴听到关于如何将其结合起来的建议)

还有这里如何在时间序列数据中获得缩放级别作为Dash中的回调输入

Answer 1

我为此奋斗了一段时间，这是我最终想出的解决方案。

在我的用例中，我通过

动态添加图形

dcc.Graph({'type': 'graph', 'index': index_counter})

链接缩放行为

@app.callback(
Output({'type': 'graph', 'index': ALL}, 'relayoutData'),
Output({'type': 'graph', 'index': ALL}, 'figure'),
Input({'type': 'graph', 'index': ALL}, 'relayoutData'),
State({'type': 'graph', 'index': ALL}, 'figure'))
def LinkedZoom(relayout_data, figure_states):
unique_data = None
for data in relayout_data:
if relayout_data.count(data) == 1:
unique_data = data
if unique_data:
for figure_state in figure_states:
if unique_data.get('xaxis.autorange'):
figure_state['layout']['xaxis']['autorange'] = True
figure_state['layout']['yaxis']['autorange'] = True
else:
figure_state['layout']['xaxis']['range'] = [
unique_data['xaxis.range[0]'], unique_data['xaxis.range[1]']]
figure_state['layout']['xaxis']['autorange'] = False
figure_state['layout']['yaxis']['range'] = [
unique_data['yaxis.range[0]'], unique_data['yaxis.range[1]']]
figure_state['layout']['yaxis']['autorange'] = False
return [unique_data] * len(relayout_data), figure_states
return relayout_data, figure_states

参考提交:https://github.com/djhedges/exit_speed/commit/863efbf00250c79663dd460f6ab2bd54e051b9d7

Answer 2

问题已解决。

不幸的是，我可能不能展示最终的代码，因为我将在prod中运行它，它可能是一个商业机密。

但是对于那些遇到类似问题的人，我建议你看看这一部分。

https://dash.plotly.com/sharing-data-between-callbacks

祝你成功!

Answer 3

@djhedges

有一些条件也会触发这个回调，所以我添加了更多的条件语句作为改进你的代码:)

for data in relayout_data:  
if data is not None and relayout_data.count(data) == 1:  
if 'xaxis.autorange' in list(data.keys()) or 'xaxis.autorange' in list(data.keys()):
unique_data = data