如何在Altair带点标记折线图中，悬停点时同步高亮线与点？

原代码中悬停仅线条高亮、数据点未同步生效的核心原因是：选择器默认仅选中单个数据点，而非对应股票（symbol）的全量元素。通过以下修改实现线条与数据点的同步高亮：

修改后的完整代码 #

import altair as alt
from vega_datasets import data
import pandas as pd

stocks = data.stocks()
source = (
    stocks.groupby([pd.Grouper(key="date", freq="6MS"), "symbol"])
    .mean()
    .reset_index()
)

hover_select = alt.selection_point(
    name="hover_select", on="pointerover", empty=False,
    fields=['symbol']  # 按symbol字段选择，悬停时选中该股票的所有元素
)
conditional_color = (
    alt.when(hover_select)
    .then(alt.Color("symbol:N"))
    .otherwise(alt.value("lightgray"))
)

alt.Chart(source).mark_line(point=True).encode(
    x=alt.X("date:O").timeUnit("yearmonth").title("date"),
    y="rank:O",
    color=conditional_color,
    # 可选：给高亮数据点添加尺寸放大效果，强化视觉区分
    size=alt.condition(hover_select, alt.value(60), alt.value(30))
).add_params(hover_select).transform_window(
    rank="rank()",
    sort=[alt.SortField("price", order="descending")],
    groupby=["date"],
).properties(
    title="Bump Chart for Stock Prices",
    width=600,
    height=150,
)

关键修改说明 #

• 选择器绑定symbol字段：在hover_select中添加fields=['symbol']，让悬停动作触发时选中该股票的所有线条和数据点，而非仅鼠标指向的单个点。
• 可选尺寸增强：通过size编码的条件判断，让高亮状态的数据点尺寸放大，进一步提升交互时的视觉辨识度。

修改后，悬停任意数据点时，对应股票的整条线条和所有数据点会同步切换为对应颜色，解决原代码中点未同步高亮的问题。

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