Dash树形图交互优化需求：指定数据显示+点击展开悬停信息

核心实现思路 #

1. 仅在树形图子容器文本区展示日涨跌幅和市值，通过设置text属性控制显示内容
2. 额外数据通过hover_data配置为悬停时展示
3. 监听树形图点击事件，触发回调将完整数据渲染到指定区域

代码示例 #

import dash
from dash import dcc, html, Input, Output, callback
import plotly.express as px
import pandas as pd

# 模拟数据（替换为你的实际数据集）
df = pd.DataFrame({
    'category': ['A', 'A', 'B', 'B'],
    'subcategory': ['A1', 'A2', 'B1', 'B2'],
    'daily_percent_change': [2.3, -1.5, 4.1, -0.8],
    'market_cap': [1200, 800, 1500, 900],
    'additional_data1': ['data1', 'data2', 'data3', 'data4'],
    'additional_data2': [100, 200, 300, 400]
})

app = dash.Dash(__name__)

app.layout = html.Div([
    # 树形图组件
    dcc.Graph(
        id='treemap',
        figure=px.treemap(
            df,
            path=['category', 'subcategory'],
            # 仅显示日涨跌幅和市值
            text=lambda row: f"涨跌幅: {row['daily_percent_change']}%\n市值: {row['market_cap']}M",
            # 配置悬停时展示的完整数据
            hover_data={
                'daily_percent_change': True,
                'market_cap': True,
                'additional_data1': True,
                'additional_data2': True,
                'category': False,  # 路径已显示，无需重复
                'subcategory': False
            }
        )
    ),
    # 用于展示点击后完整数据的容器
    html.Div(id='click-data-display', style={'margin-top': '20px', 'padding': '10px', 'border': '1px solid #ddd'})
])

@callback(
    Output('click-data-display', 'children'),
    Input('treemap', 'clickData')
)
def display_click_data(clickData):
    if not clickData:
        return html.P("点击树形图子容器查看完整数据")
    
    # 提取点击节点的完整数据
    point_data = clickData['points'][0]
    data_keys = point_data['customdata']
    data_labels = list(point_data['hoverdata'].keys())
    
    # 格式化数据为文本展示
    content = [html.H4(f"节点: {point_data['label']}")]
    for label, value in zip(data_labels, data_keys):
        content.append(html.P(f"{label}: {value}"))
    
    return content

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

关键细节说明 #

• 文本控制：通过text参数的lambda函数，只生成包含日涨跌幅和市值的文本内容，避免额外数据直接显示
• 悬停配置：hover_data字典中，设为True的字段会在鼠标悬停时显示，设为False的字段（如路径字段）可避免重复展示
• 点击回调：监听clickData事件，提取点击节点的customdata和hoverdata，格式化后渲染到页面容器中，实现点击展示完整数据的需求

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