如何在Vega-Lite中基于单元格区域裁剪Circle标记？

希望创建一个表格，使用Circle标记表示单元格数值，且标记能被裁剪至对应的单元格区域。目前在Vega-Lite中尝试了clip属性，但它仅能在可视化区域边缘裁剪圆形，不清楚如何将单个标记的分组指定为下方的表格单元格。

基于《Heatmap with Labels》示例创建的初始规范如下：

{
  "$schema": "https://vega.github.io/schema/vega-lite/v5.json",
  "data": {"url": "data/cars.json"},
  "transform": [
    {
      "aggregate": [{"op": "count", "as": "num_cars"}],
      "groupby": ["Origin", "Cylinders"]
    }
  ],
  "encoding": {
    "y": {"field": "Origin", "type": "ordinal"},
    "x": {"field": "Cylinders", "type": "ordinal"}
  },
  "layer": [
    {
      "width": {"step": 120},
      "mark": {"type": "rect", "fill": "white", "stroke": "gray"}
    },
    {
      "mark": {"type": "circle", "clip": true},
      "encoding": {
        "size": {
          "field": "num_cars",
          "type": "quantitative",
          "title": "Count of Records",
          "scale": {"rangeMax": 4000},
          "legend": {"direction": "horizontal"}
        }
      }
    },
    {
      "mark": {"type": "text", "align": "right", "dx": 55},
      "encoding": {
        "text": {"field": "num_cars", "type": "quantitative"}
      }
    }
  ],
  "config": {
    "axis": {"grid": false, "tickBand": "extent"}
  }
}

可以通过**分面（Facet）**功能实现单元格级别的裁剪。将每个单元格作为独立分面，结合clip属性就能把圆形限制在对应单元格区域内。具体修改如下：

1. 将x和y的编码从顶层移至facet的column和row配置，拆分出每个独立单元格分面
2. 在分面内部的图层中绘制背景矩形、带裁剪的圆形和数值文本
3. 确保圆形标记的clip属性设为true，使其被限制在分面（单元格）边界内

修改后的完整规范：

{
  "$schema": "https://vega.github.io/schema/vega-lite/v5.json",
  "data": {"url": "data/cars.json"},
  "transform": [
    {
      "aggregate": [{"op": "count", "as": "num_cars"}],
      "groupby": ["Origin", "Cylinders"]
    }
  ],
  "facet": {
    "row": {"field": "Origin", "type": "ordinal"},
    "column": {"field": "Cylinders", "type": "ordinal"}
  },
  "spec": {
    "width": 120,
    "height": 80,
    "layer": [
      {
        "mark": {"type": "rect", "fill": "white", "stroke": "gray"}
      },
      {
        "mark": {"type": "circle", "clip": true},
        "encoding": {
          "size": {
            "field": "num_cars",
            "type": "quantitative",
            "title": "Count of Records",
            "scale": {"rangeMax": 4000},
            "legend": {"direction": "horizontal"}
          }
        }
      },
      {
        "mark": {"type": "text", "align": "center", "baseline": "middle"},
        "encoding": {
          "text": {"field": "num_cars", "type": "quantitative"}
        }
      }
    ]
  },
  "config": {
    "axis": {"grid": false, "tickBand": "extent"},
    "facet": {"spacing": 0}
  }
}

关键说明 #

• 分面配置将每个Origin和Cylinders的组合拆分为独立单元格，每个分面拥有自己的绘图区域
• clip: true会将圆形裁剪至当前分面的边界，也就是单元格区域内
• 设置facet.spacing: 0可以消除分面之间的间隙，让表格外观更紧凑

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