Altair：多折线图工具提示

Question

我想用垂直连接的图表重新创建this example from altair's docs。我能够在每个图表上单独进行操作，但是当我将它们垂直连接时，所有点都显示在图表的中间，而不是按照Altair的示例进行操作。 This is an image of my charts.

我的代码如下，

# Create a selection that chooses the nearest point & selects based on x-value
nearest = alt.selection(type='single', nearest=True, on='mouseover',
                        encodings=['x'], empty='none')

# creating the lower line chart
line = alt.Chart().mark_line(size=3).encode(
    x='n_pitches:Q',
    color='ingame-n:N'
)


# Transparent selectors across the chart. This is what tells us
# the x-value of the cursor
selectors = alt.Chart().mark_point().encode(
    x='n_pitches:Q',
    opacity=alt.value(0),
).add_selection(
    nearest
)


# Draw points on the line, and highlight based on selection
points = line.mark_point().encode(
    opacity=alt.condition(nearest, alt.value(1), alt.value(0))
)

# Draw text labels near the points, and highlight based on selection
text = line.mark_text(align='left', dx=5, dy=-5)

# Draw a rule at the location of the selection
rules = alt.Chart().mark_rule(color='gray').encode(
    x='n_pitches:Q',
).transform_filter(
    nearest
)


upper = alt.layer(line.encode(y=alt.Y('gas_tank:Q', axis=alt.Axis(format="%"))), 
                  selectors,
                  points,
                  rules, 
                  text.encode(text=alt.condition(nearest, 'gas_tank:Q', alt.value(' '), format=".2%")),
                  data=gas_tank,
                  width=500, height=200
                      )
lower = alt.layer(line.encode(y=alt.Y('gas_tank_rate_change:Q', axis=alt.Axis(format=".4f"))), 
                  selectors,
                  points,
                  rules,
                  text.encode(text=alt.condition(nearest, 'gas_tank_rate_change:Q', alt.value(' '), format=".4f")),
                  data=gas_tank,
                  width=500, height=200
                      )

alt.vconcat(upper, lower)

基本上，我希望顶部和底部图表中的垂直线一起移动，但要分别沿每个图表中的线跟踪的点。

谢谢！