如何在Altair散点图中点击点展示对应行的长文本数据？

可以通过Altair的交互选择器结合双面板布局实现点击散点查看完整详情的需求，具体实现步骤如下：

1. 定义单点选择交互
   创建一个selection_single对象，设置为点击触发，用于捕获用户选中的散点数据：

# 创建点击触发的单点选择器
click = alt.selection_single(
    fields=['x', 'y'],  # 用坐标字段唯一标识点（如果有唯一ID列建议替换为ID）
    on='click',
    empty='none'  # 未选中时不显示内容
)

2. 修改原散点图
   给散点图添加选择器绑定，同时移除tooltip里的source避免长文本干扰，并给选中的点添加高亮样式：

# 原散点图绑定选择器
scatter = alt.Chart(tsne_df).mark_point(size=100).encode(
    x='x',
    y='y',
    color=alt.condition(click, 'is_query', alt.value('lightgray')),  # 选中点高亮，未选中变灰
    tooltip=['x', 'y', 'is_query']
).properties(
    width=800,
    height=500
).add_selection(click)  # 绑定选择器

3. 创建详情展示面板
   用表格形式展示选中行的完整数据，适配长文本的source列：

# 详情展示表格
details = alt.Chart(tsne_df).mark_table().encode(
    row=alt.Row('key:N', title='字段'),
    column=alt.Column('value:N', title='内容')
).transform_fold(
    # 展开所有列成键值对格式，适配表格展示
    ['x', 'y', 'is_query', 'source'],
    as_=['key', 'value']
).transform_filter(click)  # 只显示选中点的数据

4. 组合两个图表
   用垂直或水平布局把散点图和详情面板组合：

# 垂直组合图表
final_chart = alt.vconcat(scatter, details).properties(
    title='散点图点击查看详情'
)

# 显示图表
final_chart.show()

关键说明 #

• 如果数据有唯一标识列（如id），建议将selection_single的fields替换为该列，避免坐标重复导致选中错误
• transform_fold将行数据转为键值对格式，确保长文本能完整显示在表格中
• 未选中任何点时详情面板为空，点击散点后自动展示对应行的完整数据

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