如何将 Altair 中的两个条形图与系列之间的空间连接起来？

问题描述

我有以下代码来生成两个条形图。第一个是需要始终可见的“中心”场景。第二个代表多个压力情景，其值取决于两个滑块。

我的问题是连接两个图表，在两个系列之间留出空格并使它们在任何情况下都可见（如分组条形图）。

这是我的代码：

import altair as alt
from vega_datasets import data

pvfp=Res.loc[(Res.Item=="PVFP")&(Res.annee>0)]


base = alt.Chart(pvfp,width=500,height=300).mark_bar(color="Green").encode(
    x=alt.X('annee:Q'),y='valeur:Q',tooltip="valeur:Q"
)
central = alt.Chart(pvfp.loc[(Res.TS=='Central')&(Res.TRA=='Central')],height=300).mark_bar().encode(
    x=alt.X('annee:Q'),tooltip="valeur:Q"
)


# A slider filter
TRA_slider = alt.binding_range(min=-40,max=20,step=10,name="Sensi TRA :")
TS_slider = alt.binding_range(min=-20,step=5,name="Sensi TS : ")

slider1 = alt.selection_single(bind=TRA_slider,fields=['TRA2'],init={'TRA2': 0})
slider2 = alt.selection_single(bind=TS_slider,fields=['TS2'],init={'TS2': 0})

filter_TRA = base.add_selection(
    slider1,slider2
).transform_filter(
    slider1&slider2
).properties(title="Sensi_TRA")

central + filter_TRA

以及我现在获得的图表视图：

如果您有任何方法可以做到这一点，我将不胜感激。

更新： 这是同一问题的可重现示例。

import altair as alt
import pandas as pd
from vega_datasets import data

dataset = data.population.url
source=pd.read_json(dataset)
source2=df.loc[df.year==1900]


pink_blue = alt.Scale(domain=('Male','Female'),range=["steelblue","salmon"])

slider = alt.binding_range(min=1900,max=2000,step=10)
select_year = alt.selection_single(name="year",fields=['year'],bind=slider,init={'year': 2000})

chart1 = alt.Chart(source).mark_bar().encode(
    x=alt.X('age:O',title=None),y=alt.Y('people:Q',scale=alt.Scale(domain=(0,12000000))),).properties(
    width=300
).add_selection(
    select_year
).transform_filter(
    select_year
)
chart2 = alt.Chart(source2).mark_bar(color="green").encode(
    x=alt.X('age:O',)
chart1+chart2

如上所述，我想要的是找到一种方法来分离两个系列并获得@joelostblom 提到的示例中的输出

希望更清楚

解决方法

您可以结合使用 bandPaddingInner 和 xOffset 来做到这一点。例如：

import altair as alt
import pandas as pd
from vega_datasets import data

dataset = data.population.url
source=pd.read_json(dataset)
source2=source.loc[source.year==1900]


pink_blue = alt.Scale(domain=('Male','Female'),range=["steelblue","salmon"])

slider = alt.binding_range(min=1900,max=2000,step=10)
select_year = alt.selection_single(name="year",fields=['year'],bind=slider,init={'year': 2000})

chart1 = alt.Chart(source).mark_bar(
    xOffset=-3
).encode(
    x=alt.X('age:O',title=None),y=alt.Y('people:Q',scale=alt.Scale(domain=(0,12000000))),).properties(
    width=300
).add_selection(
    select_year
).transform_filter(
    select_year
)
chart2 = alt.Chart(source2).mark_bar(
    xOffset=5,color="green",).encode(
    x=alt.X('age:O',)
(chart1+chart2).configure_scale(bandPaddingInner=0.6)

altair bar-chart concatenation slider slider