在多折线图中将单个选择置于最前面

Question

我正在使用单个 selector 绘制多线图表，以突出显示一条线。问题是，当我 select 一行和其他行重新着色时， selected 行被埋在其他一些行下面，而我希望它出现在前面，完全可见。我可以使用 alt.value('transparent')，但这只会让所有其他行消失，相反我希望它们仍然可见并在背景中。有没有办法让这个工作？

在我下面的示例中，我有 10 行，看起来 vega-lite 正在绘制第一行 A，然后在它上面绘制 B 行，直到 L 行。因此只有 DataFrame 中的最后一列，L 行，如果 selected 则完全可见。

提前感谢您的帮助！

下面是重现图表的代码：

import pandas as pd
import numpy as np
import altair as alt

#Dataframe creation
df = pd.DataFrame(np.random.rand(15,10)+10, 
                  index=np.arange(2001,2016),
                  columns=list('ABCDEFGHIL'))
df = df.reset_index()
df = df.melt(id_vars='index')

#chart creation
selection = alt.selection(type='single', fields=['variable'])
color = alt.condition(selection,
                  alt.Color('variable:N', legend=None),
                  alt.value('lightblue'))

line = alt.Chart(df).mark_line().encode(
    y = 'value',
    x = 'index:O',
    color = color,
    tooltip = 'variable:N'
).add_selection(
    selection
).properties(
    width=400
)

legend = alt.Chart(df).mark_point().encode(
    x='variable:N',
    color=color
).add_selection(
    selection
).properties(
    width=400
)

line & legend

Answer 1

您不能使用选区来更改线条的 z 顺序，但您可以使用分层技巧来获得相同的效果，方法是创建另一层线条，该图层从第一个选区开始过滤。

import numpy as np
import pandas as pd
import altair as alt

#Dataframe creation
df = pd.DataFrame(np.random.rand(15,10)+10, 
                  index=np.arange(2001,2016),
                  columns=list('ABCDEFGHIL'))
df = df.reset_index()
df = df.melt(id_vars='index')

#chart creation
selection = alt.selection(type='single', fields=['variable'])
color = alt.condition(selection,
                  alt.Color('variable:N', legend=None),
                  alt.value('lightblue'))

line = alt.Chart(df).mark_line().encode(
    y = 'value',
    x = 'index:O',
    color = alt.value('lightblue'),
    detail = 'variable:N',
    tooltip = 'variable:N'
).add_selection(
    selection
).properties(
    width=400
)

# layer that accomplishes the highlighting
line_highlight = alt.Chart(df).mark_line().encode(
    y = 'value',
    x = 'index:O',
    color = 'variable:N',
).transform_filter(
    selection
).properties(
    width=400
)

legend = alt.Chart(df).mark_point().encode(
    x='variable:N',
    color=color
).add_selection(
    selection
).properties(
    width=400
)

(line + line_highlight) & legend

在多折线图中将单个选择置于最前面

Bring to front single selection in multi-line chart

python

vega-lite

altair