Plotly Dash：基于图选择筛选DataTable

Question

我有一个显示Pandas DataFrame的Plotty DataTable。 DataFrame在数据框中的每一列都有一个LineChart。对于数据中表示的每个ID，每个折线图都有一条线。我正在尝试使将奇数外观的图形数据与原始输入数据相关联变得更加容易。

我希望能够单击一个数据点（或者最好在ChartLegend中选择一条线，这样做将导致DataTable进行过滤，并且仅显示与所选ID相关联的行。

这是我如何制作DataTable和Charts的代码片段

def Make_PlottyFigures(df, xcol_name, device_type_dict, device_names, columns_to_plot):
    figs = []
    for col_i in range(0, len(columns_to_plot)):            
        figs.append(go.Figure())

    #Go over each device, and add a trace for each column to the appropriate figure. We want each colun in its own figure 
    for device in device_names:
        if df[df['id'] == device].shape[0] > 0:
            axs_index = 0
            for col in columns_to_plot:
                figs[axs_index].add_trace(go.Scatter(x=df[xcol_name], y=df[df['id'] == device][col],
                        mode='lines+markers',
                        name=f"{device_type_dict[device]}-{device}"))
                axs_index += 1

    index = 0;
    for col in columns_to_plot:
        figs[index].update_layout(
        title=f"{col}",
        xaxis_title="",
        yaxis_title="",
        font=dict(
                family="Courier New, monospace",
                size=18,
                color="#7f7f7f"
            )
        )
        index += 1
    return figs


def DASH_dataTable_from_pd(id, df):
    return dash_table.DataTable(
        id=f'datatable-{id}',
        columns=[
            {"name": i, "id": i, "deletable": False, "selectable": False} for i in df.columns
        ],
        data=df.to_dict('records'),
        editable=False,
        filter_action="native",
        sort_action="native",
        sort_mode="multi",
        column_selectable="single",
        row_selectable="multi",
        row_deletable=False,
        selected_columns=[],
        selected_rows=[],
        page_action="native",
        page_current= 0,
        page_size= 10,
    )

我曾尝试过在网上寻找类似内容，但还没有找到任何东西。 https://dash.plotly.com/datatable/interactivity有一个“ sorta”示例，但方向相反（在表中进行选择会突出显示等效图表数据条目）。 https://dash-docs.herokuapp.com/interactive-graphing提供了有关如何对我感兴趣的事件做出反应的示例，我只是停留在如何从这些事件触发中滤除表的问题（也使此可释放性很好）]

是否有任何我遗漏的样本，或者这很明显并且我遗漏了某些东西

Answer 1

简单的方法是重新设置表的data属性，仅传递要显示的行。您可以侦听跟踪单击事件，通过索引，customdata或clickData对象附带的任何其他属性来确定单击的跟踪。

此基本示例说明了这个想法：

df = [...]

@app.callback(
    Output("my-table", "data"),
    [Input("my-plot", "clickData")]
)
def on_trace_click(click_data):
    """Listen to click events and update table, passing filtered rows"""
    p = trace_click['points'][0]

    # here, use 'customdata' property of clicked point, 
    # could also use 'curveNumber', 'pointIndex', etc.
    if 'customdata' in p:
        key = p['customdata']['my-key']

    df_f = get_corresponding_rows(df, key)

    return df_f.to_dict('records')

def get_corresponding_rows(df, my_key):
    """Filter df, return rows that match my_key"""
    return df[df['key-column'] == my_key]

重要的是，不要仅由于过滤而更改行ID。这样，任何样式，selected状态等仍将正确应用。