Altair点击散点图切换预览图片报错求助：SchemaValidationError

核心错误点 #

1. Chart对象不能作为数据源：你写的alt.Chart(selected_image)是错误操作，selected_image本身已经是一个Chart实例，不能当作数据传入新的Chart构造函数，这直接触发了Schema验证错误。
2. 选择器未命名且实例不统一：多次调用alt.selection_single()会创建独立的选择器实例，导致点击散点图的选择事件无法关联到图片过滤逻辑。
3. 图片预览的编码冗余且过滤条件错误：图片预览不需要x/y坐标编码，且原过滤条件alt.datum.index == alt.selection_single().value无法正确匹配选中点。

修复后的完整代码 #

import altair as alt
import pandas as pd

images = ['../resources/random_images/image1.png', '../resources/random_images/image2.png', '../resources/random_images/image3.png']

df = pd.DataFrame({'x': [1, 2, 3], 'y': [4, 5, 6], 'image': images})

# 创建命名的单选选择器，绑定点击事件
point_selector = alt.selection_single(on='click', name='PointSelector', empty='none')

# 散点图关联选择器
scatterplot = alt.Chart(df).mark_circle(size=100).encode(
    x='x:Q',
    y='y:Q'
).add_selection(
    point_selector
)

# 图片预览面板：基于原数据过滤选中点，直接编码图片URL
image_preview = alt.Chart(df).transform_filter(
    point_selector  # 直接使用已命名的选择器过滤
).mark_image(
    height=200,
    width=200
).encode(
    url='image:N'  # 仅需指定图片URL字段
)

# 横向拼接两个图表
chart = alt.hconcat(scatterplot, image_preview, spacing=10)
chart.display()

关键修改说明 #

• 给选择器命名为point_selector，确保散点图和图片预览使用同一个选择器实例，实现点击联动。
• 图片预览直接基于原始DataFrame，通过transform_filter(point_selector)过滤出选中的点，不需要额外的x/y编码。
• 移除了错误的将Chart作为数据源的代码，直接构造图片预览图表。

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