如何在Vega Lite中实现参数间的动态条件交互？

不用切换到Vega，Vega Lite完全可以实现你要的联动效果。核心思路是通过参数的动态选项生成，结合数据源映射和过滤来实现。

实现步骤 #

1. 准备映射数据源：定义Supervisor与Name的对应关系数据。
2. 配置Supervisor单选参数：基础的单选控件，选项为Amy、John。
3. 配置Name下拉参数：通过select属性从映射数据源中动态筛选出当前选中Supervisor对应的Name选项。

完整代码示例 #

{
  "$schema": "https://vega.github.io/schema/vega-lite/v5.json",
  "data": {
    "values": [
      {"supervisor": "Amy", "name": "Jane"},
      {"supervisor": "Amy", "name": "Sam"},
      {"supervisor": "John", "name": "Bill"}
    ]
  },
  "params": [
    {
      "name": "Supervisor",
      "value": "Amy",
      "bind": {
        "input": "radio",
        "options": ["Amy", "John"],
        "name": "Supervisor: "
      }
    },
    {
      "name": "Name",
      "bind": {
        "input": "select",
        "options": {
          "expr": "values('nameOptions')"
        },
        "name": "Name: "
      }
    },
    {
      "name": "nameOptions",
      "select": {"fields": ["name"]},
      "from": {"data": "source"},
      "transform": [
        {"filter": {"param": "Supervisor", "field": "supervisor", "equal": {"expr": "Supervisor"}}}
      ]
    }
  ],
  "mark": "point",
  "encoding": {
    "x": {"field": "supervisor", "type": "nominal"},
    "y": {"field": "name", "type": "nominal"}
  }
}

关键说明 #

• 新增nameOptions参数，通过select从数据源中提取符合当前Supervisor选中值的Name字段，作为Name下拉控件的选项来源。
• Name参数的options直接引用nameOptions的结果，实现选项的动态更新。
• 这种方式避开了condition仅适用于mark通道的限制，直接在参数层面完成联动逻辑。

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