Vega/Vega-Lite中hconcat并排不同x刻度图表标题不对齐如何解决

hconcat布局标题对齐修复 #

只保留第一个子图y轴导致的子图标题对不齐，核心原因是各子图的侧边占位宽度不一致，按下面的配置改就能解决：

• 别对其余子图用"axis": null直接删y轴，改成给y轴配置"axis": {"labels": false, "ticks": false, "domain": false, "grid": false, "title": null}，这样系统会保留y轴的默认占位宽度，但不会显示任何y轴的文字、刻度、轴线元素，所有子图的侧边占宽一致，标题自然就对齐了
• 给所有子图设成完全一样的固定width值，别让系统自动算绘图区宽度，避免绘图区宽度差带来的标题居中偏移
• 子图之间的间距统一在hconcat层用"spacing"参数调，别给单个子图单独加margin或者padding

facet实现独立x轴刻度的方法 #

facet本身就支持子图用不同的x轴刻度，不是必须用hconcat拼：

• 在facet配置的根节点加"resolve": {"scale": {"x": "independent"}}，就能关掉x轴刻度共享，每个子图会根据自己的数据生成独立x轴刻度，完全适配你x轴刻度各不相同的需求
• facet布局自带子图标题对齐逻辑，配合上面说的隐藏非首图y轴元素的配置，不会出标题偏移的问题，整体配置比hconcat更简洁
• 核心配置片段参考：

{
  "data": {"url": "你的数据源地址"},
  "facet": {
    "column": {"field": "用来区分子图的分类字段", "title": null}
  },
  "spec": {
    // 这里放所有子图通用的配置，包括mark、encoding的通用部分
  },
  "resolve": {
    "scale": {"x": "independent"}
  },
  "columns": 2 // 改成你需要并排展示的子图数量就行
}

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