Question

我正在使用单个选择器绘制多折线图，以使折线突出。问题是，当我选择一条线而另一条线重新着色时，选定的线会埋在其他线下，而我希望它位于前面，以便完全可见。我可以使用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

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

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

1 个答案: