在多线图中显示在单选前面

时间:2018-08-28 16:16:26

标签: python vega-lite altair

我正在使用单个选择器绘制多折线图,以使折线突出。 问题是,当我选择一条线而另一条线重新着色时,选定的线会埋在其他线下,而我希望它位于前面,以便完全可见。我可以使用alt.value('transparent'),但这只会使所有其他行消失,而是希望它们在背景中仍然可见。 有办法使这项工作吗?

在下面的示例中,我有10行,而vega-lite似乎正在绘制第一行A,然后在其顶部绘制B行,直到L行。因此,只有DataFrame中的最后一列L行是完整的如果选中,则可见。

提前感谢您的帮助!

以下是复制图表的代码:

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

1 个答案:

答案 0 :(得分: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