如何解决我们可以在Altair的交互式折线图中添加交互式图例吗?
目标:
- 将鼠标悬停在折线图中,增加折线的粗细, 使所有其他行变灰,并使图例中的所有其他项变灰 也一样参见interactive line chart。
- 在图例上单击时,增加线的粗细,将其他所有行涂灰,并在图例中将所有其他项目涂灰 也一样参见interactive legend。
我们可以在下面的interactive line chart中添加交互式图例吗?
问题:线宽不会随着图例上的选择而改变。
from vega_datasets import data
source = data.stocks()
highlight = alt.selection(type='single',on='mouseover',fields=['symbol'],nearest=True)
selection = alt.selection_multi(fields=['symbol'],bind='legend',on='mouseover')
base = alt.Chart(source).encode(
x='date:T',y='price:Q',color='symbol:N',tooltip=['symbol']
)
points = base.mark_circle().encode(
opacity=alt.value(0)
).add_selection(
highlight
).properties(
width=600
)
lines = base.mark_line().encode(
opacity=alt.condition(selection,alt.value(1),alt.value(0.2)),size=alt.condition(~highlight,alt.value(3))
).add_selection(selection)
points + lines
解决方法
为什么要使用两层?
from vega_datasets import data
import altair as alt
source = data.stocks()
selection = alt.selection_multi(fields=['symbol'],bind='legend')
base = alt.Chart(source).mark_line(point=True).encode(
x='date:T',y='price:Q',color='symbol:N',tooltip=['symbol'],opacity=alt.condition(selection,alt.value(1),alt.value(0.2)),size=alt.condition(~selection,alt.value(3))
).add_selection(
selection
)
base
,
在突出显示部分添加bind='legend'
接近正确答案;但是,此解决方案会在图例中创建一些具有零不透明度点的奇怪行为。
from vega_datasets import data
source = data.stocks()
highlight = alt.selection(type='single',on='mouseover',fields=['symbol'],nearest=True,bind='legend')
selection = alt.selection_multi(fields=['symbol'],bind='legend',on='mouseover')
base = alt.Chart(source).encode(
x='date:T',tooltip=['symbol']
)
points = base.mark_circle().encode(
opacity=alt.value(0.01)
).add_selection(
highlight
).properties(
width=600
)
lines = base.mark_line().encode(
opacity=alt.condition(selection,size=alt.condition(~highlight,alt.value(3))
).add_selection(selection)
points + lines
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。