Dash&Plotly编程选中图表点如何同步selectedData保留交互

问题场景 #

• 基于Dash搭建的简易Web应用已实现基础散点图手动选点功能：用户手动选中的点位会同步展示在文本输出框中，该部分逻辑运行正常
• 需求为新增编程式自动选点能力：通过代码指定图表上的选中点位，完全模拟用户手动选点效果，支持用户后续和这些自动选中的点位正常交互
• 当前实现仅更新图表selectedpoints属性，存在两个异常：
  • 自动选中的点位虽然在图表上呈现选中样式，但不会同步展示在文本输出框中
  • 用户后续手动点击/框选点位时，所有自动选中的点位会直接消失
  • 尝试直接通过回调更新selectedData属性未生效

最小复现代码 #

from dash import Dash, html, dcc, Input, Output, State
import plotly.express as px
import plotly.graph_objects as go
import random


external_stylesheets = ['https://codepen.io/chriddyp/pen/bWLwgP.css']
app = Dash(__name__, external_stylesheets=external_stylesheets)
styles = {
    'pre': {
        'border': 'thin lightgrey solid',
        'overflowX': 'scroll',
        'width': '80%'
    }
}


def get_figure():
    fig = px.scatter(x=[0, 1, 2, 3, 4], y=[0, 1, 4, 9, 16])
    fig.update_layout({'height': 500,
                       'clickmode': 'event+select'})
    return fig


app.layout = html.Div(children=[
    dcc.Graph(
        id='graph1',
        figure=get_figure()
    ),
    html.Button('Generate random point clicks', id='generate-random-points-button'),
    html.Pre(id='selected-data', style=styles['pre']),
])


@app.callback(
    Output('graph1', 'figure'),
    Input('generate-random-points-button', 'n_clicks'),
    State('graph1', 'figure')
)
def generate_random_point_clicks(n_clicks, fig):
    if n_clicks == 0:
        return fig
    fig = go.Figure(fig)
    fig.update_traces(selectedpoints=random.sample(list(range(5)), 3))
    return fig


@app.callback(
    Output('selected-data', 'children'),
    Input('graph1', 'selectedData'))
def display_selected_data(selectedData):
    res = []
    if selectedData is not None:
        for point in selectedData['points']:
            res.append(str(point))
        return '\n'.join(res)


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

运行效果 #

问题根因 #

dcc.Graph的selectedData属于前端只读回传属性，不支持通过回调直接写入修改。仅修改trace的selectedpoints只会改变图表的视觉渲染样式，不会把选中状态同步到Dash组件的内部状态：

1. 前端不会把代码设置的选中点位计入selectedData回传给后端，因此文本框无法展示自动选中的点
2. 用户后续手动触发选点操作时，前端会用自身存储的选中状态（仅包含用户手动选中的点）覆盖代码写入的selectedpoints值，导致自动选中的点直接消失

解决方案 #

不要将graph1.selectedData作为选中状态的唯一数据源，新增dcc.Store组件统一存储全局选中的点位索引，所有选点触发源（自动生成按钮点击、用户手动选点）都先更新Store中的索引值，再用Store值同时驱动图表选中样式、文本输出内容，实现状态统一管理。

修正后可运行代码：

from dash import Dash, html, dcc, Input, Output, State, callback, ctx
import plotly.express as px
import plotly.graph_objects as go
import random


external_stylesheets = ['https://codepen.io/chriddyp/pen/bWLwgP.css']
app = Dash(__name__, external_stylesheets=external_stylesheets)
styles = {
    'pre': {
        'border': 'thin lightgrey solid',
        'overflowX': 'scroll',
        'width': '80%'
    }
}


def get_figure():
    fig = px.scatter(x=[0, 1, 2, 3, 4], y=[0, 1, 4, 9, 16])
    fig.update_layout({'height': 500,
                       'clickmode': 'event+select'})
    return fig

# 存储原始散点数据，用于根据索引生成点详情
raw_x = [0, 1, 2, 3, 4]
raw_y = [0, 1, 4, 9, 16]

app.layout = html.Div(children=[
    # 新增Store统一存储选中点索引
    dcc.Store(id='selected-points-store', data=[]),
    dcc.Graph(
        id='graph1',
        figure=get_figure()
    ),
    html.Button('Generate random point clicks', id='generate-random-points-button'),
    html.Pre(id='selected-data', style=styles['pre']),
])


# 统一更新Store中的选中点索引
@callback(
    Output('selected-points-store', 'data'),
    Input('generate-random-points-button', 'n_clicks'),
    Input('graph1', 'selectedData'),
    State('selected-points-store', 'data'),
    prevent_initial_call=True
)
def update_selected_store(n_clicks, manual_selected, stored_points):
    trigger_id = ctx.triggered_id
    # 触发源为自动生成按钮：随机选3个点替换当前选中状态
    if trigger_id == 'generate-random-points-button':
        return random.sample(list(range(5)), 3)
    # 触发源为用户手动选点：提取前端回传的点索引存入Store
    elif trigger_id == 'graph1':
        if not manual_selected:
            return []
        return [p['pointIndex'] for p in manual_selected['points']]
    return stored_points


# 根据Store的选中索引更新图表选中样式
@callback(
    Output('graph1', 'figure'),
    Input('selected-points-store', 'data'),
    State('graph1', 'figure')
)
def update_graph_selected(selected_idx, fig):
    fig = go.Figure(fig)
    fig.update_traces(selectedpoints=selected_idx)
    return fig


# 根据Store的选中索引更新文本框展示内容
@callback(
    Output('selected-data', 'children'),
    Input('selected-points-store', 'data')
)
def display_selected_data(selected_idx):
    res = []
    for idx in selected_idx:
        point_info = {
            'curveNumber': 0,
            'pointIndex': idx,
            'pointNumber': idx,
            'x': raw_x[idx],
            'y': raw_y[idx]
        }
        res.append(str(point_info))
    return '\n'.join(res)


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

实现效果 #

• 点击自动生成按钮后，随机选中的点会正常显示选中样式，同时同步展示在下方文本框
• 用户后续手动点选/框选点位时，不会出现自动选中点消失的问题，自动选点和手动选点逻辑完全打通
• 所有选中状态统一在Store中管理，后续扩展清空选点、反选、按条件选点等功能时，仅需更新Store中的索引值即可

内容的提问来源于stack exchange，提问作者erap129