Vega Lite：如何访问repeat变量实现数据过滤？

我懂你想要简化配置的痛点——用repeat批量生成子图，同时每个子图叠加淡色总计数据当背景，结果卡在过滤器没法读取repeat变量上。其实Vega-Lite专门提供了repeat()函数来直接引用repeat上下文里的循环变量，下面给你具体的实现方案：

核心思路拆解 #

• 用repeat定义子图的分组维度（比如按某字段分多行/多列）
• 每个子图做双层图层：
  • 背景层：显示全量数据的总计（设置低透明度，不用过滤）
  • 前景层：只显示当前分组的数据（通过过滤器匹配repeat变量）
• 关键操作：在filter里用repeat('row')或repeat('column')直接获取当前循环的变量值

示例配置（可直接复用） #

{
  "$schema": "https://vega.github.io/schema/vega-lite/v5.json",
  "data": {"url": "your-data-source.csv"}, // 替换成你的数据源
  "repeat": {"row": ["Electronics", "Clothing", "Home"]}, // 你的分组字段值列表
  "spec": {
    "layer": [
      // 背景：全量总计数据（淡灰色低透明度）
      {
        "mark": {"type": "bar", "opacity": 0.2, "color": "#e0e0e0"},
        "encoding": {
          "x": {"field": "product_type", "type": "ordinal"},
          "y": {"aggregate": "sum", "field": "sales", "type": "quantitative"}
        }
      },
      // 前景：当前分组的具体数据
      {
        "mark": "bar",
        "encoding": {
          "x": {"field": "product_type", "type": "ordinal"},
          "y": {"aggregate": "sum", "field": "sales", "type": "quantitative"},
          "color": {"field": "category", "type": "nominal"}
        },
        "transform": [
          // 核心：用repeat('row')获取当前循环的分类值，匹配数据中的category字段
          {"filter": "datum.category === repeat('row')"}
        ]
      }
    ]
  }
}

特殊场景适配 #

如果你的repeat是按字段名而非具体值（比如repeat: {row: ['category']}），需要用datum[repeat('row')]来动态访问字段值，示例过滤器逻辑：

"transform": [
  {"filter": "datum[repeat('row')] === repeat('row')"} // 按需调整匹配逻辑
]

要是用了多维度repeat（同时分行和列），只需要对应组合repeat('row')和repeat('column')就行，比如：

"transform": [
  {"filter": "datum.group_row === repeat('row') && datum.group_col === repeat('column')"}
]

这样就能彻底抛弃冗长的重复配置，用repeat批量生成子图，同时每个子图精准过滤出当前分组数据，叠加总计背景的效果也能完美实现。

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