2

使用 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
4

1 回答 1

4

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

在此处输入图像描述

于 2019-11-25T14:05:11.630 回答