legend - 我们可以在 Altair 的交互式折线图中添加交互式图例吗？

Question

目标：

1. 在折线图中鼠标悬停时，增加线条的粗细，使所有其他线条变灰，并使图例中的所有其他项目也变灰。请参阅交互式折线图。
2. 单击图例时，增加线条的粗细，使所有其他线条变灰，并使图例中的所有其他项目也变灰。请参阅交互式图例。

我们可以在下面的交互式折线图中添加交互式图例吗？

ISSUE: line-width 不会随着 legend 上的选择而改变。

from vega_datasets import data

source = data.stocks()

highlight = alt.selection(type='single', on='mouseover',
                          fields=['symbol'], nearest=True)

selection = alt.selection_multi(fields=['symbol'], bind='legend', on='mouseover')
base = alt.Chart(source).encode(
    x='date:T',
    y='price:Q',
    color='symbol:N',
    tooltip=['symbol']
    
)

points = base.mark_circle().encode(
    opacity=alt.value(0)
).add_selection(
    highlight
).properties(
    width=600
)

lines = base.mark_line().encode(
    opacity=alt.condition(selection, alt.value(1), alt.value(0.2)),
    size=alt.condition(~highlight, alt.value(1), alt.value(3))
).add_selection(selection)

points + lines

标签： legendlinechartinteractivealtair

Answer 1

为什么要使用两层？

from vega_datasets import data
import altair as alt

source = data.stocks()

selection = alt.selection_multi(fields=['symbol'], bind='legend')
base = alt.Chart(source).mark_line(point=True).encode(
    x='date:T',
    y='price:Q',
    color='symbol:N',
    tooltip=['symbol'],
    opacity=alt.condition(selection, alt.value(1), alt.value(0.2)),
    size=alt.condition(~selection, alt.value(1), alt.value(3))
).add_selection(
    selection
)

base

输出：