Altair：如何制作带可切换回归线的交互式图表？

1. transform_fold的作用与必要性 #

transform_fold核心作用是将宽格式数据转成窄长格式：把多列数值型数据（比如不同系列的Y值）折叠成两列——一列存原列名（作为分组标识，比如series），另一列存对应数值。

• 必要性：如果不用它，你得为每个散点系列单独写图层，没法通过单个图例选择器统一控制所有系列的显示/隐藏。折叠后所有系列共享同一套编码规则，图例选择器能一次性绑定所有分组。

2. 修复回归线无法切换的问题（selection_point正确位置） #

选择器必须定义在顶层图表，且散点、回归线图层都要引用选择条件：

# 1. 定义图例选择器（顶层）
legend_select = alt.selection_point(fields=['series'], bind='legend')

# 2. 散点图层（带折叠和选择条件）
scatter = alt.Chart(df).mark_point().transform_fold(
    ['y1', 'y2'],  # 替换为你的散点列名
    as_=['series', 'y']
).encode(
    x='x:Q',
    y='y:Q',
    color='series:N',
    opacity=alt.condition(legend_select, alt.value(1), alt.value(0))
)

# 3. 回归线图层（绑定相同选择器）
fit = alt.Chart(fit_df).mark_line().transform_fold(
    ['y_fit1', 'y_fit2'],  # 替换为你的回归线列名
    as_=['series', 'y_fit']
).encode(
    x='x:Q',
    y='y_fit:Q',
    color='series:N',
    opacity=alt.condition(legend_select, alt.value(1), alt.value(0))
)

# 4. 组合图表
(scatter + fit).add_params(legend_select)

关键：回归线图层必须和散点使用完全一致的series字段值，并通过opacity条件绑定选择器，才能实现同步切换。

3. 图例按「Series（散点）」「Fit（回归线）」分组 #

给散点和回归线的series字段添加分组前缀，让Altair自动分组：

# 散点折叠后重命名series
scatter = alt.Chart(df).mark_point().transform_fold(
    ['y1', 'y2'],
    as_=['series', 'y']
).transform_calculate(
    series=alt.expr.concat('Series: ', alt.datum.series)  # 添加分组前缀
).encode(...)

# 回归线折叠后重命名series
fit = alt.Chart(fit_df).mark_line().transform_fold(
    ['y_fit1', 'y_fit2'],
    as_=['series', 'y_fit']
).transform_calculate(
    series=alt.expr.concat('Fit: ', alt.datum.series)  # 添加分组前缀
).encode(...)

# 组合时开启图例分组
(scatter + fit).add_params(legend_select).configure_legend(
    groupColor=True,
    title=None
)

这样图例会自动把前缀相同的项归为一组，实现「Series」「Fit」的分组效果。

4. 图例中回归线使用线条图标 #

让回归线图层的编码绑定stroke而非color，并配置图例符号类型：

fit = alt.Chart(fit_df).mark_line().transform_fold(...).encode(
    x='x:Q',
    y='y_fit:Q',
    stroke='series:N',  # 用stroke绑定线条颜色，对应线条图例
    opacity=alt.condition(legend_select, alt.value(1), alt.value(0))
).configure_legend(
    symbolType='stroke'  # 强制线条类图例用线条图标
)

散点图层继续用color='series:N'绑定点标记，图例会自动区分点和线条的图标。

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