Plotly / Dash：多个过滤器答案

【问题标题】：Plotly / Dash: Multiple filtersPlotly / Dash：多个过滤器
【发布时间】：2019-03-11 13:21:11
【问题描述】：

我想实现一些数据过滤器以按特定标准预选数据。这些过滤器本身应该是图表，即饼图（例如可以选择大陆的位置）和时间线（例如可以选择时间跨度的位置）。最重要的是，我需要从多个图表中应用多个过滤器，而不会在每次通过选择另一个图表进行过滤时重置它们。

但是，我不知道如何实现。我使用 dash.dependencies.Events 发现了一些旧的东西，但它不再受支持。

每当我按图表 A 中的一个标准进行过滤，然后想按图表 B 中的另一个标准进行过滤时，图表 A 就会重置。

由于这可能是很多人遇到的情况，并且由于 dash 似乎不支持本机，我想问是否有人对此有解决方法？

//编辑：这是一个简单的例子。我可以通过单击上面条形图上的数据点进行过滤。但是每当我点击下方折线图上的一个点时，它都会从条形图中重置设置。我想保留两者。

import datetime

import dash
import dash_core_components as dcc
import dash_html_components as html
import plotly
from dash.dependencies import Input, Output

external_stylesheets = ['https://codepen.io/chriddyp/pen/bWLwgP.css']

app = dash.Dash(__name__, external_stylesheets=external_stylesheets)
app.layout = html.Div([
        dcc.Graph(id='graph')
    ])

# Multiple components can update everytime interval gets fired.
@app.callback(Output('graph', 'figure'),
              [Input('graph', 'selectedData')])
def update_graph_live(input):
    print(input)
    data = {
        'x': [1,2,3,4,5],
        'y': [1,2,3,4,5],
        'a': [0,-1,-2],
        'b': [100,101,102]
    }

    # Create the graph with subplots
    fig = plotly.tools.make_subplots(rows=2, cols=1, vertical_spacing=0.2)
    fig['layout']['margin'] = {
        'l': 30, 'r': 10, 'b': 30, 't': 10
    }
    fig['layout']['legend'] = {'x': 0, 'y': 1, 'xanchor': 'left'}
    fig['layout']['clickmode'] = 'event+select'

    fig.append_trace({
        'x': data['x'],
        'y': data['y'],
        'name': 'xy',
        'type': 'bar',
    }, 1, 1)
    fig.append_trace({
        'x': data['a'],
        'y': data['b'],
        'name': 'ab',
        'mode': 'lines+markers',
        'type': 'scatter'
    }, 2, 1)

    return fig


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

【问题讨论】：

欢迎使用 stackoverflow。请提供您尝试过的代码示例和收到的错误，您如何尝试按标准过滤？
我们开始吧。现在，您知道如何解决我的问题了吗？

标签： python reactjs plotly plotly-dash

【解决方案1】：

现在您的问题似乎是在graph 组件的图中的任何图中选择数据，即函数的输出，会触发 Input(graph, 'selectedData') 到同一个函数！

所以你需要做的就是将图分离成单独的 dcc.Graph 事物并使用dash.dependencies.State 来监听和维护每个图的selectedData 属性。

【讨论】：

【解决方案2】：

感谢您的回答。我设法找到了解决方法。

首先，正如@russellr 提到的，dash.dependencies.State 可以传递，但不会触发回调。我希望在多个过滤器上触发回调，而不会相互重置。

现在，对于 Dash 的好人来说，禁用此重置将启用无限循环，因此禁用它很有意义。

我的做法是引入Dropdown列表进行过滤，回调只从下拉列表的value到图表的figure。

我在下拉列表中选择多个条件，从中获取（非交互式）可视化。它可能不那么漂亮，但该应用仍然获得了良好的可用性反馈。

【讨论】：