Altair 交互式线图，单击右侧图标时使线条弹出并突出显示答案

【问题标题】：Altair interactive line plot, make line pop and highlighted when clicking icon on the rightAltair 交互式线图，单击右侧图标时使线条弹出并突出显示
【发布时间】：2019-09-11 15:30:02
【问题描述】：

我一直在尝试在 jupyter lab 上使用 Altair 制作一些交互式情节。

我已经达到了结果如下的阶段。

如您所见，该行在突出显示时不会弹出到前面。如何让它流行到最前面？

附上代码。

import altair as alt
source = df
selection = alt.selection_multi(fields=['class'], on='click')    
color = alt.condition(selection,
                      alt.Color('class:O', legend=None,
                      scale=alt.Scale(scheme='category10')),
                      alt.value('lightgray'))

base = alt.Chart(source).mark_line(point=True, size=10).encode(
    x='x',
    y='y',
    color=color
).properties(
    width=800,
    height=900
).interactive()

legend = alt.Chart(source).mark_point(filled=True, size=200).encode(
    y=alt.Y('class:O'),
    color=color
).add_selection(
selection
)

base | legend

【问题讨论】：

标签： python-3.x jupyter-notebook line-plot altair

【解决方案1】：

无法根据选择更改线条的 z 顺序。但是，您可以使用一个技巧来创建类似的效果，即使用显示所有数据的静态背景以及根据所选内容过滤的前景。

例如：

background = alt.Chart(source).mark_line(point=True, size=10).encode(
    x='x',
    y='y',
    color=alt.value('lightgray')
).properties(
    width=800,
    height=900
)

foreground = background.encode(
    color=alt.Color('class:O', legend=None,
                    scale=alt.Scale(scheme='category10'))
).transform_filter(
    selection
)


legend = alt.Chart(source).mark_point(filled=True, size=200).encode(
    y=alt.Y('class:O'),
    color=color
).add_selection(
    selection
)

(background + foreground) | legend

【讨论】：

嗨，我无法让代码运行。我遇到了一个错误：Javascript 错误：找不到名为“selector005”的选择

【解决方案2】：

您可以将opacity 属性添加到基本图表以使选择弹出。将以下行添加到您的 mark_line() 属性中

opacity=alt.condition(selection, alt.value(1), alt.value(0.05))

【讨论】：