Vega可视化：过滤矩阵子图时移除空单元格的实现方法

这个问题我之前做Vega矩阵类可视化的时候实打实踩过坑！核心问题很明确：你只对标记层（marks）的数据做了过滤，但矩阵的单元格布局是基于原始的行/列维度数据生成的——相当于你把单元格的“架子”留着，只把里面的内容拿走了，自然会空出一大片。要解决这个，得让布局逻辑和标记数据共享同一个过滤后的数据源，同步更新。

下面分几种常见场景给你具体方案：

场景1：用Facet生成矩阵布局 #

如果你的矩阵是用Vega的facet或者Vega-Lite的facet/repeat实现的，那要把过滤逻辑提前到布局所用的数据集上，而不是只在marks里加过滤：

1. 先创建一个过滤后的派生数据集，把行/列的过滤条件都加上：

{
  "name": "filtered_data",
  "source": "your_raw_data",
  "transform": [
    // 行过滤：只保留指定行分类
    {"filter": {"field": "row_key", "oneOf": ["行A", "行C"]}},
    // 列过滤：只保留指定列分类
    {"filter": {"field": "col_key", "oneOf": ["列X", "列Z"]}}
  ]
}

2. 把facet的数据源指定为这个filtered_data，同时marks也用这个数据源——这样facet会自动根据过滤后的行/列分类生成布局，不会有空单元格。

如果是Vega-Lite，更简单：把过滤条件放在顶层的transform里，整个可视化（包括facet布局和marks）都会用过滤后的数据：

{
  "$schema": "https://vega.github.io/schema/vega-lite/v5.json",
  "data": {"url": "your_data.csv"},
  "transform": [
    {"filter": {"field": "row_key", "oneOf": ["行A", "行C"]}},
    {"filter": {"field": "col_key", "oneOf": ["列X", "列Z"]}}
  ],
  "facet": {
    "row": {"field": "row_key"},
    "column": {"field": "col_key"}
  },
  "spec": {"mark": "point", "encoding": {...}}
}

场景2：手动计算网格位置（自定义矩阵） #

如果是通过x/y编码手动计算单元格位置（比如用行号、列号映射坐标），那要注意重新计算过滤后的行/列索引，避免沿用原始数据的索引导致空位置：

1. 在过滤后的数据集里，用window变换重新生成连续的行/列索引：

{
  "name": "filtered_data",
  "source": "your_raw_data",
  "transform": [
    {"filter": {"field": "row_key", "oneOf": ["行A", "行C"]}},
    {"filter": {"field": "col_key", "oneOf": ["列X", "列Z"]}},
    // 给过滤后的行分类重新分配连续索引
    {"window": [{"op": "dense_rank", "as": "row_idx"}], "groupby": ["row_key"]},
    // 给过滤后的列分类重新分配连续索引
    {"window": [{"op": "dense_rank", "as": "col_idx"}], "groupby": ["col_key"]}
  ]
}

2. 把marks的x/y编码绑定到新的row_idx/col_idx上，而不是原始的行/列分类的索引——这样过滤后的单元格会紧凑排列，不会有空隙。

场景3：用Repeat动态生成矩阵 #

如果用的是Vega-Lite的repeat，默认repeat的行/列是静态数组，过滤后不会自动更新。这时候要改用信号（signal）动态生成repeat的行/列值：

1. 先创建过滤后的数据集（同场景1）；
2. 用信号提取过滤后的唯一行/列分类：

"signals": [
  {"name": "filtered_rows", "update": "unique(data('filtered_data').map(d => d.row_key))"},
  {"name": "filtered_cols", "update": "unique(data('filtered_data').map(d => d.col_key))"}
]

3. 把repeat的行/列绑定到这些信号：

"repeat": {
  "row": {"signal": "filtered_rows"},
  "column": {"signal": "filtered_cols"}
}

关键总结 #

不管用哪种方式，核心原则都是：让矩阵的布局逻辑（facet/repeat/手动网格）和标记数据使用同一个过滤后的数据源。只要布局层能感知到过滤后的行/列子集，就会自动调整单元格数量，空单元格的问题自然就解决了。

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