Altair多层图表多选择功能组合失效问题求助

我需要在Altair多层图表中实现两种交互功能：

• 鼠标悬停时高亮最近的折线
• 高亮每条折线中与鼠标当前x位置最近的数据点

1. 单独实现两个功能的代码 #

高亮折线 #

select = alt.selection_point(encodings=['x'], on='mouseover', nearest=True)
line_select = alt.selection_point(fields=['symbol'], nearest=True, on='mouseover')

base = alt.Chart(data.stocks.url).encode(color='symbol:N', x='date:T', y='price:Q')

selected_lines = base.mark_point(opacity=0).add_params(line_select)

line = base.mark_line().encode(
    strokeWidth=alt.condition(line_select, alt.value(3), alt.value(1))
)

(
    line
    + selected_lines 
)

高亮数据点 #

select = alt.selection_point(encodings=['x'], on='mouseover', nearest=True)

base = alt.Chart(data.stocks.url).encode(color='symbol:N', x='date:T', y='price:Q')

line = base.mark_line()
marks = base.mark_point(fill='black', strokeWidth=0).encode(
    opacity=alt.condition(select, alt.value(1), alt.value(0)),
).add_params(select)

(
    line
    + marks
)

2. 组合后点选择功能失效的代码 #

将两个功能组合后，仅折线高亮生效，数据点选择功能完全失效：

select = alt.selection_point(encodings=['x'], on='mouseover', nearest=True)
line_select = alt.selection_point(fields=['symbol'], nearest=True, on='mouseover')

base = alt.Chart(data.stocks.url).encode(color='symbol:N', x='date:T', y='price:Q')

selected_lines = base.mark_point(opacity=0).add_params(line_select)

line = base.mark_line().encode(
    strokeWidth=alt.condition(line_select, alt.value(3), alt.value(1))
)
marks = base.mark_point(fill='black', strokeWidth=0).encode(
    opacity=alt.condition(select, alt.value(1), alt.value(0)),
).add_params(select)

(
    line
    + selected_lines 
    + marks
)

3. 通过修改示例代码复现问题 #

原示例代码 #

import altair as alt
import pandas as pd
import numpy as np

np.random.seed(42)
columns = ["A", "B", "C"]
source = pd.DataFrame(
    np.cumsum(np.random.randn(100, 3), 0).round(2),
    columns=columns, index=pd.RangeIndex(100, name="x"),
)
source = source.reset_index().melt("x", var_name="category", value_name="y")

# Create a selection that chooses the nearest point & selects based on x-value
nearest = alt.selection_point(nearest=True, on="pointerover",
                              fields=["x"], empty=False)

# The basic line
line = alt.Chart(source).mark_line(interpolate="basis").encode(
    x="x:Q",
    y="y:Q",
    color="category:N"
)

# Draw points on the line, and highlight based on selection
points = line.mark_point().encode(
    opacity=alt.condition(nearest, alt.value(1), alt.value(0))
)

# Draw a rule at the location of the selection
rules = alt.Chart(source).transform_pivot(
    "category",
    value="y",
    groupby=["x"]
).mark_rule(color="gray").encode(
    x="x:Q",
    opacity=alt.condition(nearest, alt.value(0.3), alt.value(0)),
    tooltip=[alt.Tooltip(c, type="quantitative") for c in columns],
).add_params(nearest)

# Put the layers into a chart
alt.layer(
    line, points, rules
).properties(
    width=600, height=300
)

添加折线高亮后的修改 #

添加折线选择器并修改折线图层：

# 添加折线选择器
nearest_line = alt.selection_point(nearest=True, on="mouseover", fields=["category"])

# 修改折线图层实现高亮
line = alt.Chart(source).mark_line(interpolate="basis").encode(
    x="x:Q",
    y="y:Q",
    color="category:N",
    strokeWidth=alt.condition(nearest_line, alt.value(3), alt.value(1)),
)

不同图层附加参数的效果 #

尝试将nearest_line附加到不同图层，均未得到预期效果：

• 附加到折线图层：所有线条均显示选中状态（线宽3）
• 附加到点图层：折线高亮生效，但数据点和tooltip不再显示
• 附加到规则图层：所有线条均显示未选中状态（线宽1）

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