Altair：使用双轴和日期时间 x 轴制作区间选择线图

Question

到目前为止，我正在尝试制作一个双 y 轴线图，其中日期时间索引为 x 轴，并带有间隔选择：

#base encoding the X-axis
brush = alt.selection(type='interval', encodings=['x'])
base = alt.Chart(yData.reset_index())
base = base.encode(alt.X('{0}:T'.format(yData.index.name), 
                         axis=alt.Axis(title=yData.index.name)))

py = base.mark_line()
py = py.encode(alt.X('date:T',scale = alt.Scale(domain = brush)),
               alt.Y('plotY', axis=alt.Axis(title='ylabel1')))
py = py.properties(width = 700, height = 230)


px = base.mark_line()
px = px.encode(alt.Y('plotX1', axis=alt.Axis(title='ylabel2')))
px = px.properties(width = 700, height = 230)

upper = (py + px).resolve_scale(y='independent')

lower = upper.copy()
lower = lower.properties(height=20).add_selection(brush)

p = alt.vconcat(upper, lower).configure_concat(spacing=0)
p

如果我尝试生成 p，我会收到以下错误：

Javascript Error: Duplicate signal name: "selector045_x"
This usually means there's a typo in your chart specification. See the JavaScript console for the full traceback

如果我尝试制作 upper，我会得到：

我的数据框：

知道如何在这里获得区间选择吗？

另外，我在使用 Altair 时不断收到此错误，知道如何调试吗？我没有java经验，并且正在使用Mac。

编辑

仅将选择添加到其中一个子图后，

brush = alt.selection(type='interval', encodings=['x'])
base = alt.Chart(yData.reset_index())
base = base.encode(alt.X('{0}:T'.format(yData.index.name), 
                         axis=alt.Axis(title=yData.index.name)))

py = base.mark_line()
py = py.encode(alt.X('date:T',scale = alt.Scale(domain = brush)),
               alt.Y('plotY', axis=alt.Axis(title='ylabel1')))
py = py.properties(width = 700, height = 230).add_selection(brush)


px = base.mark_line()
px = px.encode(alt.Y('plotX1', axis=alt.Axis(title='ylabel2')))
px = px.properties(width = 700, height = 230)

upper = (py + px).resolve_scale(y='independent')

lower = upper.copy()
lower = lower.properties(height=20)

p = alt.vconcat(upper, lower).configure_concat(spacing=0)
p

我得到了这个：

(1) 选择无效

(2) 不知何故，我得到了upper 的精确复制品，用于下图

**EDIT -- 这让它工作了**

brush = alt.selection(type='interval', encodings=['x'])
base = alt.Chart(yData.reset_index())
base = base.encode(alt.X('{0}:T'.format(yData.index.name), 
                         axis=alt.Axis(title=yData.index.name)))

py = base.mark_line(color='orange')
py = py.encode(alt.X('date:T',scale = alt.Scale(domain = brush)),
               alt.Y('plotY', axis=alt.Axis(title='ylabel1')),
              )
py = py.properties(width = 700, height = 230)


px = base.mark_line()
px = px.encode(alt.X('date:T',scale = alt.Scale(domain = brush)),
               alt.Y('plotX1', axis=alt.Axis(title='ylabel2')))
px = px.properties(width = 700, height = 230)

# upper = px
upper = (py + px).resolve_scale(y='independent')
lower = px.copy()
lower = lower.properties(height=20).add_selection(brush)

p = alt.vconcat(upper, lower).configure_concat(spacing=0)
p

Answer 1

将选择添加到 px 或 py。如果您将相同的选择添加到图层中的两个子图表，则会导致此错误。这是一个应该在 Altair 中修复的错误。

更具体地说，您的代码应如下所示：

# ...
px = px.properties(width = 700, height = 230).add_selection(brush)  # add selection here
# ...
lower = lower.properties(height=20)  # not here
# ...