2024-06-16 09:41:12 发布
网友
是否可以更改滑块选择绑定的位置
在altair文档或vega lite文档(https://vega.github.io/vega-lite/docs/bind.html)中找不到任何内容
我想将年份滑块向上移动,靠近主散点图:https://vizsim.github.io/pkws_in_D/kba_neuzl_umwelt_fz14_v01.html
在Altair/Vega Lite输出中调整滑块位置的唯一方法是使用CSS。如果您直接输出HTML,您可以将CSS添加到HTML文件中。如果在Jupyter笔记本中显示Altair图表,可以使用^{} module添加适当的CSS
例如,下面是滑动条移到右上角的US Population Over Time图表:
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 )
您还可以使用JS选择并移动它。以下是带有单独列的滑块的HTML:
<div class="container"> <div class="row"> <div class="col-lg-8"> <h3>Chart</h3> <div id="vis"></div> </div> <div class="col-lg"> <h3>Slider</h3> <div id="slider"> <div id="oldchildslider"></div> </div> </div> </div> </div>
现在,JS将移动滑块(从Altair示例中提取spec):
spec
vegaEmbed('#vis', spec).then(function(result) { const sliders = document.getElementsByClassName('vega-bindings'); const newparent = document.getElementById('slider'); const oldchild = document.getElementById("oldchildslider"); newparent.replaceChild(sliders[0], oldchild); }).catch(console.error);
代码笔上的完整代码:https://codepen.io/andyreagan/pen/xxgLwaZ?editors=1010 对replaceChild方法的引用:https://developer.mozilla.org/en-US/docs/Web/API/Node/replaceChild
replaceChild
在Altair/Vega Lite输出中调整滑块位置的唯一方法是使用CSS。如果您直接输出HTML,您可以将CSS添加到HTML文件中。如果在Jupyter笔记本中显示Altair图表,可以使用^{} module 添加适当的CSS
例如,下面是滑动条移到右上角的US Population Over Time图表:
您还可以使用JS选择并移动它。以下是带有单独列的滑块的HTML:
现在,JS将移动滑块(从Altair示例中提取
spec
):代码笔上的完整代码:https://codepen.io/andyreagan/pen/xxgLwaZ?editors=1010 对
replaceChild
方法的引用:https://developer.mozilla.org/en-US/docs/Web/API/Node/replaceChild相关问题 更多 >
编程相关推荐