如何用alt.selection_point实现Altair分面面板动态排序？

问题描述 #

现有一个Altair分面图表，分面面板顺序由foo列决定，希望添加下拉框，选择后动态切换排序依据为foo或bar列。尝试实现的代码及运行报错如下：

尝试代码 #

import altair as alt
import pandas as pd
from vega_datasets import data

df = data.cars()

add_df = pd.DataFrame({
    "Origin": ["USA", "Europe", "Japan"],
    "foo": [1, 2, 3],
    "bar": [3, 2, 1],    
})

df = df.merge(
    add_df,
    on="Origin",
    how="inner",
)

sort_dropdown = alt.binding_select(options=["foo", "bar"], name="Sort by ")
sort_select = alt.selection_point(
    fields=["sortby"],
    bind=sort_dropdown,
    value=[{"sortby": "foo"}],
)

chart = alt.Chart(df).mark_point().encode(
    x="Cylinders:Q",
    y="Displacement:Q",
    color="Origin:N",
).add_params(
    sort_select,
).facet(
    facet=alt.Facet(
        "Origin:N",
        sort=alt.SortField(sort_select.sortby),
    ),
)

运行报错 #

Traceback (most recent call last):
  File "/home/centre/regression/test.py", line 50, in <module>
    sort=alt.SortField(sort_select.sortby),
         ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
  File "/home/centre/.pyenv/versions/3.11.5/lib/python3.11/site-packages/altair/vegalite/v5/schema/core.py", line 16685, in __init__
    super(SortField, self).__init__(field=field, order=order, **kwds)
  File "/home/centre/.pyenv/versions/3.11.5/lib/python3.11/site-packages/altair/utils/schemapi.py", line 776, in __init__
    self.to_dict(validate=True)
  File "/home/centre/.pyenv/versions/3.11.5/lib/python3.11/site-packages/altair/utils/schemapi.py", line 983, in to_dict
    raise SchemaValidationError(self, err) from None
altair.utils.schemapi.SchemaValidationError: '{'expr': 'param_1.sortby'}' is an invalid value for `field`. Valid values are of type 'string'.

疑问：是否可以直接获取selection_point的值作为排序字段？当前实现与示例的主要区别是未使用alt.condition表达式作为中间层。

错误原因 #

alt.SortField的field参数要求传入字符串类型的字段名，但sort_select.sortby返回的是Vega表达式对象，不符合Schema验证规则，因此触发报错。

解决方案 #

需要通过alt.condition结合动态字段引用实现排序切换，以下是两种可行方案：

方案1：通过计算字段动态生成排序值 #

使用transform_calculate创建动态字段sort_val，根据下拉框选择的参数获取对应foo或bar列的值，再基于该字段排序：

import altair as alt
import pandas as pd
from vega_datasets import data

df = data.cars()

add_df = pd.DataFrame({
    "Origin": ["USA", "Europe", "Japan"],
    "foo": [1, 2, 3],
    "bar": [3, 2, 1],    
})

df = df.merge(
    add_df,
    on="Origin",
    how="inner",
)

sort_dropdown = alt.binding_select(options=["foo", "bar"], name="Sort by ")
sort_select = alt.selection_point(
    fields=["sortby"],
    bind=sort_dropdown,
    value=[{"sortby": "foo"}],
)

chart = alt.Chart(df).transform_calculate(
    # 根据选中参数动态选择排序字段
    sort_val=alt.datum[alt.expr.param('sortby')]
).mark_point().encode(
    x="Cylinders:Q",
    y="Displacement:Q",
    color="Origin:N",
).add_params(
    sort_select,
).facet(
    facet=alt.Facet(
        "Origin:N",
        # 基于动态生成的字段排序
        sort=alt.SortField(field='sort_val', order='ascending')
    ),
)

chart.show()

方案2：直接在排序逻辑中使用条件表达式 #

无需额外计算字段，通过alt.condition直接在分面的sort参数中切换排序字段：

import altair as alt
import pandas as pd
from vega_datasets import data

df = data.cars()

add_df = pd.DataFrame({
    "Origin": ["USA", "Europe", "Japan"],
    "foo": [1, 2, 3],
    "bar": [3, 2, 1],    
})

df = df.merge(
    add_df,
    on="Origin",
    how="inner",
)

sort_dropdown = alt.binding_select(options=["foo", "bar"], name="Sort by ")
sort_select = alt.selection_point(
    fields=["sortby"],
    bind=sort_dropdown,
    value=[{"sortby": "foo"}],
)

chart = alt.Chart(df).mark_point().encode(
    x="Cylinders:Q",
    y="Displacement:Q",
    color="Origin:N",
).add_params(
    sort_select,
).facet(
    facet=alt.Facet(
        "Origin:N",
        sort=alt.condition(
            sort_select,
            alt.SortField(field=alt.expr.param('sortby'), order='ascending'),
            alt.SortField(field='foo', order='ascending')
        )
    ),
)

chart.show()

说明 #

两种方案核心都是通过Vega表达式引用选中的参数值，实现排序依据的动态切换：

• 方案1通过计算字段明确排序值，逻辑更直观；
• 方案2直接在排序逻辑中完成切换，代码更简洁。

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