Vega-Lite小多图配置：背景灰显其余分组数据点的实现方法

需求说明 #

使用facet类小多图展示分组数据时，在每个子图的背景显示所有其他分组的灰色数据点，仅高亮当前子图对应分组的数据，且要求适配分组数量未知的动态场景。 #

实现结论 #

可以通过transform + repeat算子的组合实现该需求，无需硬编码分组值，也无需手动编写固定数量的concat配置。 #

核心实现步骤 #

• 第一步：自动提取数据中所有唯一的分组值，作为repeat的遍历参数
• 第二步：通过repeat的row/column参数遍历分组值，自动生成对应数量的子图
• 第三步：每个子图内通过颜色通道的条件判断，区分当前分组和其他分组的显示样式

关键配置片段 #

动态多图生成配置 #

"repeat": {
  "row": {"field": "group"}
}

颜色区分配置 #

"color": {
  "condition": {
    "test": "datum['group'] == repeat.row",
    "value": "red"
  },
  "value": "grey"
}

方案优势 #

• 自动适配数据中的分组数量，无需提前知晓分组取值
• 代码精简可复用，不需要为每个分组单独编写子图配置
• 布局效果和原生facet算子生成的小多图完全一致

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