如何在Vega-Altair交互式图表中绑定Y轴实现缩放？

默认情况下，Altair的.interactive()方法仅启用X轴的缩放与平移交互，这就是你只能操作时间轴的原因。要让Y轴也支持缩放，只需显式指定交互的轴范围即可，有两种简单方式实现：

方法1：直接修改.interactive()参数 #

在.interactive()中明确指定同时支持X、Y轴的缩放和平移，或者单独开启Y轴绑定：

修改后的完整代码：

import altair as alt
from vega_datasets import data

source = data.unemployment_across_industries.url

selection = alt.selection_point(fields=['series'], bind='legend')

chart = alt.Chart(source).mark_area().encode(
    alt.X('yearmonth(date):T').axis(domain=False, format='%Y %B', tickSize=0),
    alt.Y('sum(count):Q', axis=alt.Axis(minExtent=30, domain=False, format='$.0f', tickSize=0)),
    alt.Color('series:N').scale(scheme='category20b'),
    opacity=alt.when(selection).then(alt.value(1)).otherwise(alt.value(0.2))
).properties(
    width=600,
    height=400
).add_params(
    selection
).interactive(zoom='xy', pan='xy')  # 同时启用XY轴的缩放和平移

说明：

• zoom='xy'：允许鼠标滚轮同时缩放X、Y轴
• pan='xy'：允许拖拽同时平移X、Y轴
• 若仅需开启Y轴缩放，也可单独设置.interactive(bind_y=True)

方法2：自定义交互选择器（更灵活） #

如果需要精细控制交互行为（比如只允许Y轴缩放，禁止平移），可以创建单独的区间选择器绑定到缩放行为：

import altair as alt
from vega_datasets import data

source = data.unemployment_across_industries.url

selection = alt.selection_point(fields=['series'], bind='legend')
# 创建支持XY轴缩放的区间选择器
zoom = alt.selection_interval(bind='scales', encodings=['x', 'y'])

chart = alt.Chart(source).mark_area().encode(
    alt.X('yearmonth(date):T').axis(domain=False, format='%Y %B', tickSize=0),
    alt.Y('sum(count):Q', axis=alt.Axis(minExtent=30, domain=False, format='$.0f', tickSize=0)),
    alt.Color('series:N').scale(scheme='category20b'),
    opacity=alt.when(selection).then(alt.value(1)).otherwise(alt.value(0.2))
).properties(
    width=600,
    height=400
).add_params(
    selection, zoom  # 添加自定义缩放选择器
)

这种方式可自由指定绑定的轴（比如encodings=['y']就只允许Y轴缩放），适配特殊交互需求。

内容的提问来源于stack exchange，提问作者dull