如何在Altair图表中高亮选中线条，其余线条设为浅灰色？

修改思路 #

要实现「选中线条高亮、其余变浅灰」，不能用transform_filter过滤掉未选中数据（会直接隐藏其他线条），而是保留所有数据，通过alt.condition控制颜色区分选中/未选中状态。

方案1：选中单个Region高亮 #

如果需要精准选中某条Region线条，代码修改如下：

# 创建单个Region下拉选择器
region_dropdown = alt.binding_select(options=melted_df['Region'].unique().tolist(), name="选择区域: ")
region_selection = alt.selection_single(fields=['Region'], bind=region_dropdown, name='Region', init={"Region": melted_df['Region'].unique()[0]})

# 类别选择器保持不变
variable_dropdown = alt.binding_select(options=melted_df['variable'].unique().tolist(), name="选择类别: ")
variable_selection = alt.selection_single(fields=['variable'], bind=variable_dropdown, name='Variable')

# 按年份排序数据
sorted_data = melted_df.sort_values(by='Year')

# 生成图表
chart = alt.Chart(sorted_data).mark_line(size=10).encode(
    x='Year:O',
    y=alt.Y('mean(value):Q', title='选中数值'),
    # 核心逻辑：选中的Region用原有颜色，其余线条设为浅灰色
    color=alt.condition(region_selection, 'Region:N', alt.value('lightgray')),
    tooltip=["Region", "value", "Year", "Major region"]
).add_selection(
    region_selection
).add_selection(
    variable_selection
).transform_filter(
    variable_selection  # 仅显示选中类别的数据
).properties(width=600, height=600).interactive()

chart

方案2：选中Major region下所有线条高亮 #

如果需要选中整个大区域，让该区域下的所有Region线条高亮，其余变灰，代码修改如下：

# 创建Major region下拉选择器
result_dropdown = alt.binding_select(options=melted_df['Major region'].unique().tolist(), name="选择大区域: ")
result_selection = alt.selection_single(fields=['Major region'], bind=result_dropdown, name='Area', init={"Major region": "West Midlands"})

# 类别选择器
variable_dropdown = alt.binding_select(options=melted_df['variable'].unique().tolist(), name="选择类别: ")
variable_selection = alt.selection_single(fields=['variable'], bind=variable_dropdown, name='Variable')

# 按年份排序数据
sorted_data = melted_df.sort_values(by='Year')

# 生成图表
chart = alt.Chart(sorted_data).mark_line(size=10).encode(
    x='Year:O',
    y=alt.Y('mean(value):Q', title='选中数值'),
    # 核心逻辑：选中大区域下的Region用原有颜色，其余设为浅灰色
    color=alt.condition(result_selection, 'Region:N', alt.value('lightgray')),
    tooltip=["Region", "value", "Year", "Major region"]
).add_selection(
    result_selection
).add_selection(
    variable_selection
).transform_filter(
    variable_selection  # 仅显示选中类别的数据
).properties(width=600, height=600).interactive()

chart

关键修改点 #

1. 移除了原代码中针对result_selection的transform_filter，保留所有数据用于对比显示。
2. 用alt.condition替代固定的颜色编码，实现选中状态的颜色区分：
   • 第一个参数：选择器对象，判断数据是否被选中
   • 第二个参数：选中状态下的颜色编码（保留Region的原有颜色区分）
   • 第三个参数：未选中状态下的固定颜色（lightgray）
3. 保留了类别选择的transform_filter，确保仅展示选中类别的数据，避免多类别混合混乱。

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