<p>在Altair/Vega Lite输出中调整滑块位置的唯一方法是使用CSS。如果您直接输出HTML,您可以将CSS添加到HTML文件中。如果在Jupyter笔记本中显示Altair图表,可以使用<a href="https://ipython.readthedocs.io/en/stable/api/generated/IPython.display.html" rel="nofollow noreferrer">^{<cd1>} module</a>添加适当的CSS</p>
<p>例如,下面是滑动条移到右上角的<a href="https://altair-viz.github.io/gallery/us_population_over_time.html#gallery-us-population-over-time" rel="nofollow noreferrer">US Population Over Time</a>图表:</p>
<pre><code>from IPython.display import display, HTML
display(HTML("""
<style>
form.vega-bindings {
position: absolute;
right: 0px;
top: 0px;
}
</style>
"""))
import altair as alt
from vega_datasets import data
source = data.population.url
pink_blue = alt.Scale(domain=('Male', 'Female'),
range=["steelblue", "salmon"])
slider = alt.binding_range(min=1900, max=2000, step=10)
select_year = alt.selection_single(name="year", fields=['year'],
bind=slider, init={'year': 2000})
alt.Chart(source).mark_bar().encode(
x=alt.X('sex:N', title=None),
y=alt.Y('people:Q', scale=alt.Scale(domain=(0, 12000000))),
color=alt.Color('sex:N', scale=pink_blue),
column='age:O'
).properties(
width=20
).add_selection(
select_year
).transform_calculate(
"sex", alt.expr.if_(alt.datum.sex == 1, "Male", "Female")
).transform_filter(
select_year
).configure_facet(
spacing=8
)
</code></pre>
<p><a href="https://i.stack.imgur.com/T4XuJ.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/T4XuJ.png" alt="enter image description here"/></a></p>