python - 在 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 中更改位置并不容易。

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

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

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

如果您在 Jupyter notebook 中显示图表，您可以这样做(在 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)