在 Altair 绘图上，您可以更改选项（例如下拉菜单、单选按钮）的显示位置吗？

使用 Altair 在 Python 中绘图：我有 2 个并排绘制的图表，右侧的绘图包含一个下拉选择菜单。默认情况下，下拉菜单显示在图的左下角。我想将菜单移到与其链接的右侧图下方。我在文档中没有看到任何内容selection_single or add_selection这与菜单的位置有关。我正在使用|水平连接图的方法。

简化示例：

生成上述示例的代码（如果访问数据源有任何问题，请告诉我！不应该有任何限制。）：

# Load the data
url = 'https://data.cityofnewyork.us/api/views/vfnx-vebw/rows.csv'
squirrel_data = pd.read_csv(url, usecols = ['Unique Squirrel ID', 'Hectare', 'Shift', 'Date','Hectare Squirrel Number'])
# source (data): https://catalog.data.gov/dataset/2018-central-park-squirrel-census-hectare-data

# Wrangle data
squirrel_data_group_shift = squirrel_data[['Hectare', 'Unique_Squirrel_ID', 'Shift']].groupby(['Hectare','Shift']).count().reset_index().head(30)
squirrel_data_group = squirrel_data[['Hectare', 'Unique_Squirrel_ID']].groupby('Hectare').count().reset_index().head(15)

# Create Dropdown selection
shifts = ['AM','PM']
shift_dropdown = alt.binding_select(options=shifts)
shift_select = alt.selection_single(fields=['Shift'], bind = shift_dropdown)

# Chart 1
shift_chart = (alt.Chart(squirrel_data_group_shift, title = 'Count by shift')
           .mark_bar()
           .add_selection(shift_select)
           .encode(
               alt.X('Hectare:N'), 
               alt.Y('Unique_Squirrel_ID'))
              .transform_filter(shift_select))

# Chart 2
count_chart = (alt.Chart(squirrel_data_group, title = 'Total counts')
    .mark_bar()
    .encode(
        alt.X('Hectare:N'),
        alt.Y('Unique_Squirrel_ID:Q')))

# Plot side-by-side  
count_chart | shift_chart

在 Altair 中更改位置并不容易。

控制输入​​元素位置的方法是设置element的论证alt.selection_single到页面上您希望元素出现的容器的 CSS 选择器字符串。默认情况下，它与图表显示在同一容器中。

如果您想修改默认容器位置中元素的位置，可以使用 CSS 样式/属性；例如，您可以将此样式标签添加到显示图表的页面：

<style>
.vega-bind {
  text-align:right;
}
</style>

如果您在 Jupyter 笔记本中显示图表，您可以执行以下操作（在 JupyterLab 中测试）：

import altair as alt
from vega_datasets import data

input_dropdown = alt.binding_select(options=['Europe','Japan','USA'])
selection = alt.selection_single(fields=['Origin'], bind=input_dropdown)

chart = alt.Chart(data.cars.url).mark_point().encode(
    x='Horsepower:Q',
    y='Miles_per_Gallon:Q',
    color = alt.condition(selection, 'Origin:N', alt.value('lightgray')),
    tooltip='Name:N'
).add_selection(
    selection
)

from IPython.display import HTML
display(HTML("""
<style>
.vega-bind {
  text-align:right;
}
</style>
"""))
display(chart)