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

Question

这是以下问题的后续问题：

我遇到的情况是，我有一个水平串联的图表，我在左侧使用下拉选择器，右侧使用另一个下拉选择器。现在，我希望任一列表都显示在各自的图下方。

目前它们都出现在彼此之上，使用上面 link 的解决方案，我可以将它们从左向右移动到一起。有没有办法把它们分开？

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

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

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

In altair: how to assign individual placements to selection elements (dropdown lists etc) in a concatenated plot

python

selection

jupyter-notebook

vega-lite

altair