Блог

Цели:

1. При наведении курсора мыши на линейную диаграмму увеличьте толщину линии, выделите серым цветом все остальные линии, а также все другие элементы в легенде. См. Интерактивная линейная диаграмма.
2. При щелчке в легенде увеличьте толщину линии, выделите серым цветом все остальные линии, а также все другие элементы в легенде. См. Интерактивную легенду.

Можем ли мы добавить интерактивную легенду к интерактивной линейной диаграмме ниже?

ПРОБЛЕМА: ширина линии не изменяется при выборе легенды.

 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
  

Зачем использовать два слоя?

 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
  

Вывод:

Добавление bind='legend' выделения близко к правильному ответу; однако это решение создает некоторое странное поведение с нулевыми точками непрозрачности в легенде.

 from vega_datasets import data

source = data.stocks()

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

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.01)
).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