Vega-Lite facet 中的 waffle 图位置为何错乱？

2026-11-06数据小许

结论

问题主要在网格坐标的计算方式和固定的 xOffset。当前的 row、col 公式会生成负数列坐标，xOffset: -50 则会把矩形整体向左移。这两项都可能让 waffle 图偏离对应的日期分面。

目前使用的计算公式是：

{"calculate": "ceil(datum.id / 10)", "as": "row"},
{"calculate": "datum.id - datum.row * 10", "as": "col"}

id 从 1 开始时，前十条记录的 row 都是 1，col 则从 -9 到 0。若要让每个分面内按 10 列排列，可以改用从 0 开始的行列坐标：

{"calculate": "(datum.id - 1) % 10", "as": "col"},
{"calculate": "floor((datum.id - 1) / 10)", "as": "row"}

这样 col 的范围是 0–9，row 会随记录数量增加。位置编码相应使用 col 作为 x、row 作为 y：

"encoding": {
  "x": {"field": "col", "type": "ordinal", "axis": null},
  "y": {"field": "row", "type": "ordinal", "axis": null}
}

这与原配置中 x 使用 row、y 使用 col 的方向相反。若要保留原来的方向，也可以继续使用原映射，但要确保行列公式生成的是预期的非负坐标。

先从矩形 mark 中移除固定偏移：

"xOffset": -50

位置编码会决定矩形所在的网格位置。之后检查 width、height 和矩形的 width、height 是否能在每个分面内容纳目标网格。当前分面尺寸是 120 × 120，矩形边长为 15。如果布局仍有裁切或拥挤，可以减小矩形尺寸或增大分面尺寸。

window 按 Work Mode 排序，但同一 Work Mode 下的多条记录可能并列。若需要固定格子顺序，可以增加一个次级排序字段，例如 Name：

"sort": [
  {"field": "Work Mode", "order": "ascending"},
  {"field": "Name", "order": "ascending"}
]

这会在记录并列时固定顺序；具体使用哪个字段，取决于业务需要的排列方式。

第二层使用 joinaggregate 按 Week No_ 求 maxId，再筛选最后一条记录，因此每周只会选出一条记录。若标签需要出现在每个日期分面，应将 Weekday 一并加入聚合分组：

{
  "joinaggregate": [
    {"op": "max", "field": "id", "as": "maxId"}
  ],
  "groupby": ["Week No_", "Weekday"]
}

标签的具体位置还需根据日期文字的摆放目标调整。当前文字层设置了 dy: -60，应检查这个像素偏移是否会让标签移出 120 高的分面。

排查时可先修正坐标公式并移除 xOffset，再检查标签层的分组和偏移。实际显示效果也会受 Deneb 使用的 Vega-Lite 版本和渲染配置影响，必要时可在 Vega Editor 中逐项验证。