Создание многослойного линейного графика, который выделяет несколько вариантов по умолчанию, а затем выделяется при наведении курсора мыши и делает все остальные линии серыми - PullRequest
Новая
       65

Создание многослойного линейного графика, который выделяет несколько вариантов по умолчанию, а затем выделяется при наведении курсора мыши и делает все остальные линии серыми

0 голосов
/ 11 июля 2020

Я хочу выделить строку, на которой зависает мышь. Наряду с этим, я также хочу отображать некоторые линии в цвете, когда пользовательское взаимодействие с мышью не происходит. Но я хочу, чтобы эти линии стали серыми, когда пользователь начнет взаимодействовать.

Возможно ли это сейчас в Altair / Vega-Lite?

Я подошел близко, используя технику наслоения, Я выделяю выбранную строку поверх всего, и я также могу отображать некоторые строки по умолчанию с цветами. Это поседение тех первоначально окрашенных линий , которые я не могу сделать - 

df = pd.DataFrame({'time':[1,2,3, 1,2,3, 1,2,3, 1,2,3 ,1,2,3], 'fruit': ['apple','apple','apple','orange','orange','orange','peach','peach','peach', 'banana','banana','banana', 'mango', 'mango', 'mango'], 'price': [4,8,12, 1,2,4, 5,7,9, 1,2,3, 4,10, 15]})

highlight = alt.selection_single(on='mouseover',fields=['fruit'], nearest=True, empty='none')

base = alt.Chart(df).mark_line().encode(
    x='time:O',
    y='price:Q',
    detail='fruit',
    color = alt.value('lightgrey')
)

background = base.mark_line().encode(
    color=alt.condition(alt.datum.fruit == 'mango', alt.value('green'), alt.value('yellow'))
).transform_filter({'thatfield': 'fruit', 'oneOf': ['apple', 'mango']})

# middleground = base.mark_line().encode(
#     color=alt.condition(highlight, alt.value('red'), alt.value('lightgrey'))
# )

foreground = base.mark_line().encode(
    color=alt.value('red')
).transform_filter(highlight)

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

points+base+background+foreground

Когда мышь находится за пределами области, все выглядит нормально - enter image description here

When mouse is near a line, it highlights the line, but the issue is that the default lines do not become grey -
enter image description here

To achieve that, I tried using middleground (the idea being, whatever is selected is red, otherwise grey, superimposed on default values) that you can see commented in the code, but since it is layered on top of background, the default colors get hidden and become grey right from the start.
введите описание изображения здесь

Есть предложения?

...