Altair官方示例运行报错：Javascript Error: Cannot read properties of undefined

环境信息 #

• JupyterLab v3.4.4（Chrome浏览器）
• macOS 12.6系统
• conda环境，Altair版本v5.0.1

问题详情 #

运行Altair官方提供的「美国人口年龄性别分布」示例代码时，出现以下JavaScript错误：

Javascript Error: Cannot read properties of undefined (reading 'length')
This usually means there's a typo in your chart specification. See the javascript console for the full traceback.

即使在同一内核下新建笔记本仅粘贴示例代码，仍出现相同错误，其他Altair图表可正常显示。

示例代码如下：

import altair as alt
from vega_datasets import data

source = data.population.url

select_year = alt.selection_point(
    name="Year",
    fields=["year"],
    bind=alt.binding_range(min=1900, max=2000, step=10, name="Year"),
    value={"year": 2000},
)

alt.Chart(source).mark_bar().encode(
    x=alt.X("sex:N", axis=alt.Axis(labels=False, title=None, ticks=False)),
    y=alt.Y("people:Q", scale=alt.Scale(domain=(0, 12000000)), title="Population"),
    color=alt.Color(
        "sex:N",
        scale=alt.Scale(domain=("Male", "Female"), range=["steelblue", "salmon"]),
        title="Sex",
    ),
    column=alt.Column("age:O", title="Age"),
).properties(
    width=20,
    title="U.S. Population by Age and Sex"
).add_params(
    select_year
).transform_calculate(
    "sex", alt.expr.if_(alt.datum.sex == 1, "Male", "Female")
).transform_filter(
    select_year
).configure_facet(
    spacing=8
)

解决方案 #

错误源于selection_point的value参数格式不符合Vega-Lite的预期：当使用bind=alt.binding_range且仅指定单个字段（fields=["year"]）时，value应直接传入字段对应的单个数值，而非字典格式。

修正后的代码 #

只需将select_year中的value={"year": 2000}改为value=2000：

import altair as alt
from vega_datasets import data

source = data.population.url

select_year = alt.selection_point(
    name="Year",
    fields=["year"],
    bind=alt.binding_range(min=1900, max=2000, step=10, name="Year"),
    value=2000,  # 此处改为单个数值
)

alt.Chart(source).mark_bar().encode(
    x=alt.X("sex:N", axis=alt.Axis(labels=False, title=None, ticks=False)),
    y=alt.Y("people:Q", scale=alt.Scale(domain=(0, 12000000)), title="Population"),
    color=alt.Color(
        "sex:N",
        scale=alt.Scale(domain=("Male", "Female"), range=["steelblue", "salmon"]),
        title="Sex",
    ),
    column=alt.Column("age:O", title="Age"),
).properties(
    width=20,
    title="U.S. Population by Age and Sex"
).add_params(
    select_year
).transform_calculate(
    "sex", alt.expr.if_(alt.datum.sex == 1, "Male", "Female")
).transform_filter(
    select_year
).configure_facet(
    spacing=8
)

补充说明 #

selection_point设计初衷是支持多值/离散点选择，对于单值的range绑定场景，也可以改用selection_single（功能完全一致），代码调整如下：

select_year = alt.selection_single(
    name="Year",
    fields=["year"],
    bind=alt.binding_range(min=1900, max=2000, step=10, name="Year"),
    value=2000,
)

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