创建分层的折线图，默认情况下突出显示一些选择，然后根据鼠标悬停突出显示，并使其他所有线条变为灰色

Question

我要突出显示鼠标悬停的行。除此之外，当没有用户通过鼠标进行交互时，我还希望显示一些颜色的线条。但是我希望这些线在用户开始交互时变为灰色。

从现在开始，在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

当鼠标在该区域之外时，看起来不错-

当鼠标靠近线条时，它会高亮显示线条，但问题是默认线条不会变成灰色-

为此，我尝试使用 middleground （想法是，无论选择什么，都是 red ，否则为 grey ，叠加在默认值上），您可以在代码中看到注释，但是由于它位于背景之上，因此默认颜色会被隐藏并从一开始就变成灰色。

有什么建议吗？