Altair：使用雙軸和日期時間 x 軸制作間隔選擇線 plot

Question

到目前為止，我正在嘗試制作一條雙 y 軸線 plot，日期時間索引為 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

如果我嘗試生產鞋面，我會得到：

我的 dataframe：

知道如何在這里獲得間隔選擇嗎？

此外，我在使用 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 plot 的精確復制品

**編輯——這使它工作**

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
# ...