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

Question

使用Altair在Python中进行绘制：我有2个并排绘制的图表，右侧绘制包括一个下拉选择菜单。默认情况下，下拉菜单显示在图的左下方。我想将菜单移动到链接到的右侧图的下方。我没有看到selection_single或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

Answer 1

在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)