交互式 Altair 图轴上方的文本
Text above axes of an interactive Altair plot
一段时间以来,我一直在听从关于 问题的建议,在我的 Altair 地块上放置各种 tips/information。但是,如果将 Altair 图设置为 interactive(),则此建议不起作用 - 在我看来,启用比例绑定可防止任何图 objects 出现在矩形轴之外。
这是一个基于 link 的重现示例:比较生成的图 with/without 最后注释的 interactive() 行。
import altair as alt
import pandas as pd
import numpy as np
df = pd.DataFrame({'x': np.linspace(0, 4, 1000)})
df['y'] = np.sin(2 * np.pi * df['x'])
select_point = alt.selection_single(fields=('x',), nearest=True, on='mouseover', empty='none')
line = alt.Chart(df).mark_line().encode(
x='x:Q',
y='y:Q',
)
points = line.mark_point(filled=True, size=100).encode(
opacity=alt.condition(select_point, alt.value(1.0), alt.value(0.0)),
).add_selection(select_point)
text1 = alt.Chart(df, width=600, height=400).mark_text(
align='left', baseline='bottom', dx=+5, fontSize=12,
).encode(
x=alt.value(0.0),
y=alt.value(-1),
text='_label:N',
opacity=alt.condition(select_point, alt.value(1.0), alt.value(0.0)),
).transform_calculate(
_label='"ABOVE AXES x = " + format(datum.x, ".2f") + ", y = " + format(datum.y, ".2f")',
)
text2 = alt.Chart(df, width=600, height=400).mark_text(
align='left', baseline='bottom', dx=+5, fontSize=12,
).encode(
x=alt.value(0.0),
y=alt.value(12),
text='_label:N',
opacity=alt.condition(select_point, alt.value(1.0), alt.value(0.0)),
).transform_calculate(
_label='"INSIDE AXES x = " + format(datum.x, ".2f") + ", y = " + format(datum.y, ".2f")',
)
chart = alt.layer(line, points, text1, text2)
# chart = chart.interactive()
Interactive OFF
Interactive ON
附加信息,如果是 helpful/relevant:
- 我用 interactive() 和手动选择比例绑定测试了这个,效果一样
- 我在将图表保存为 HTML
后在 PyQT WebEngineView 容器中渲染
- 肯定有 一些 类 objects 的跟踪超出轴边界,即使它们没有在交互式 ON 下显示。我还测试了点标记:悬在轴边界边缘的大标记在交互式关闭时完全可见,但在交互式打开时被切断。但是,如果您启用了交互式并缓慢拖动轴边界,您可以看到绘图 title 向上移动以避免大标记滑出绘图的顶部边缘,直到标记的中心离开边界,标题会弹回。
底线问题:当绘图设置为交互式时,如何让文本显示在 Altair 的轴边界之外?
将clip=False
传递给mark_text()
,文本将在轴外可见。
非绑定比例的 clip
参数默认为 False
,绑定比例默认为 True
。
一段时间以来,我一直在听从关于
这是一个基于 link 的重现示例:比较生成的图 with/without 最后注释的 interactive() 行。
import altair as alt
import pandas as pd
import numpy as np
df = pd.DataFrame({'x': np.linspace(0, 4, 1000)})
df['y'] = np.sin(2 * np.pi * df['x'])
select_point = alt.selection_single(fields=('x',), nearest=True, on='mouseover', empty='none')
line = alt.Chart(df).mark_line().encode(
x='x:Q',
y='y:Q',
)
points = line.mark_point(filled=True, size=100).encode(
opacity=alt.condition(select_point, alt.value(1.0), alt.value(0.0)),
).add_selection(select_point)
text1 = alt.Chart(df, width=600, height=400).mark_text(
align='left', baseline='bottom', dx=+5, fontSize=12,
).encode(
x=alt.value(0.0),
y=alt.value(-1),
text='_label:N',
opacity=alt.condition(select_point, alt.value(1.0), alt.value(0.0)),
).transform_calculate(
_label='"ABOVE AXES x = " + format(datum.x, ".2f") + ", y = " + format(datum.y, ".2f")',
)
text2 = alt.Chart(df, width=600, height=400).mark_text(
align='left', baseline='bottom', dx=+5, fontSize=12,
).encode(
x=alt.value(0.0),
y=alt.value(12),
text='_label:N',
opacity=alt.condition(select_point, alt.value(1.0), alt.value(0.0)),
).transform_calculate(
_label='"INSIDE AXES x = " + format(datum.x, ".2f") + ", y = " + format(datum.y, ".2f")',
)
chart = alt.layer(line, points, text1, text2)
# chart = chart.interactive()
Interactive OFF Interactive ON
附加信息,如果是 helpful/relevant:
- 我用 interactive() 和手动选择比例绑定测试了这个,效果一样
- 我在将图表保存为 HTML 后在 PyQT WebEngineView 容器中渲染
- 肯定有 一些 类 objects 的跟踪超出轴边界,即使它们没有在交互式 ON 下显示。我还测试了点标记:悬在轴边界边缘的大标记在交互式关闭时完全可见,但在交互式打开时被切断。但是,如果您启用了交互式并缓慢拖动轴边界,您可以看到绘图 title 向上移动以避免大标记滑出绘图的顶部边缘,直到标记的中心离开边界,标题会弹回。
底线问题:当绘图设置为交互式时,如何让文本显示在 Altair 的轴边界之外?
将clip=False
传递给mark_text()
,文本将在轴外可见。
非绑定比例的 clip
参数默认为 False
,绑定比例默认为 True
。