在 altair 中：如何将单个位置分配给串联图中的选择元素（下拉列表等）答案

【问题标题】：In altair: how to assign individual placements to selection elements (dropdown lists etc) in a concatenated plot在 altair 中：如何将单个位置分配给串联图中的选择元素（下拉列表等）
【发布时间】：2021-04-10 21:00:53
【问题描述】：

这是一个后续问题：On an Altair plot, can you change the location that a selection (e.g. dropdown, radio button) is displayed?

我有一个情况，我有一个水平连接的图表，我在左侧使用下拉选择器，在右侧绘图使用另一个下拉选择器。现在我希望任一列表出现在各自的情节下方。

目前它们都出现在彼此的顶部，并且通过上面链接中的解决方案，我可以将它们从左到右一起移动。有没有办法把它们分开？

我不知道 altair 是否可以做到这一点，即 vega-lite 中的先决条件是否允许这样做。

【问题讨论】：

标签： python jupyter-notebook selection altair vega-lite

【解决方案1】：

您可以这样做的一种方法是使用与链接问题相同的策略，但在 CSS 中使用 Subsequent Sibling combinator。例如：

import altair as alt
from vega_datasets import data

input_dropdown1 = alt.binding_select(options=['Europe','Japan','USA'], name='chart1')
selection1 = alt.selection_single(fields=['Origin'], bind=input_dropdown1)

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

input_dropdown2 = alt.binding_select(options=['Europe','Japan','USA'], name='chart2')
selection2 = alt.selection_single(fields=['Origin'], bind=input_dropdown2)

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

from IPython.display import HTML
display(HTML("""
<style>
.vega-bind {
  text-align:right;
}
.vega-bind ~ .vega-bind {
  text-align:left;
}
</style>
"""))
display(chart1 | chart2)

【讨论】：

是的，行得通！然而，到目前为止我只能让它左对齐|就在我使用答案中所示的 display(...) 方法时。我还需要将其保存为 html。但是当我做 alt.hconcat(cart1, cart2).save('figure.html') 下拉框的对齐方式没有保存。