如何用Dash Plotly树形图跟踪选中数据？代码报错求修正

错误核心原因 #

报错的直接原因是回调输出目标selected-data未在布局中定义，Dash无法找到对应组件完成更新；另外原代码缺少启动服务的关键语句，导致终端无任何输出。

修正后的完整代码 #

import dash
from dash import dcc, html, Input, Output

import plotly.graph_objects as go

# 生成树形图
fig = go.Figure(go.Treemap(
    labels = ["Eve","Cain", "Seth", "Enos", "Noam", "Abel", "Awan", "Enoch", "Azura"],
    parents = ["", "Eve", "Eve", "Seth", "Seth", "Eve", "Eve", "Awan", "Eve"],
    root_color="lightgrey",
))

fig.update_layout(margin = dict(t=50, l=25, r=25, b=25))

app = dash.Dash(__name__)

# 布局中补充回调目标组件
app.layout = html.Div([
    dcc.Graph(
        id='basic-interactions',
        figure=fig
    ),
    # 添加用于展示选中节点的容器
    html.Div(id='selected-data', style={'margin-top':20, 'padding':10, 'background':'#f5f5f5'})
])

@app.callback(
    Output("selected-data", "children"),
    Input("basic-interactions", "clickData"),
)
def update_selected_node(selected_data):
    # 提取并返回点击的节点信息
    if selected_data:
        node_label = selected_data['points'][0]['label']
        return f"选中的节点: {node_label}"
    return "点击树形图节点查看选中信息"

# 启动Dash服务
if __name__ == '__main__':
    app.run_server(debug=True)

关键修改说明 #

• 在布局中添加了id='selected-data'的html.Div，作为回调的输出目标组件
• 补充app.run_server(debug=True)语句，启动服务并输出调试日志
• 优化回调逻辑，提取点击节点的标签并返回可读的显示文本
• 采用Dash 2.x简洁导入方式，替代旧版dash.dependencies写法

原错误提示翻译：
尝试将回调输出项连接到组件："selected-data"，但布局中不存在该ID的组件。

如果要为其他回调生成的组件（即不在初始布局中的组件）分配回调，可以通过设置suppress_callback_exceptions=True来抑制此异常。该ID已用于输出项的回调：selected-data.children

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