Vega如何在同一视图内实现多个图表的网格对齐展示？

Vega本身没有封装Vega-Lite中开箱即用的hconcat/vconcat运算符，但可以通过两种方式实现任意网格布局效果，以下是业内常用的最佳实践：

方案1：使用group内置layout（优先推荐） #

Vega的group标记原生支持自动布局配置，不需要手动计算每个子图表的坐标，适配绝大多数场景：

• 水平并排（等效hconcat）：给顶层group设置layout配置，指定flow方向为x轴即可
• 垂直排列（等效vconcat）：指定flow方向为y轴即可
• 多行多列网格布局：指定columns参数为需要的列数，超出列数的子图表会自动换行
  示例配置片段参考：

{
  "marks": [
    {
      "type": "group",
      "layout": {
        "flow": "x", // 水平排布，垂直排布改为y即可
        "padding": 20, // 子图表之间的间距
        "align": "center", // 对齐方式
        "bounds": "full"
      },
      "marks": [
        {
          "type": "group",
          "name": "chart1",
          "width": 300,
          "height": 200,
          // 第一个图表的scales、axes、marks等完整配置
        },
        {
          "type": "group",
          "name": "chart2",
          "width": 300,
          "height": 200,
          // 第二个图表的完整配置
        }
        // 可继续添加更多子图表
      ]
    }
  ]
}

如果需要网格布局，只需要修改layout配置：

"layout": {
  "columns": 2, // 每行放2个图表
  "padding": {"row": 15, "column": 20}, // 分别设置行间距和列间距
  "align": "all"
}

方案2：手动计算坐标（适用于高度自定义的布局场景） #

如果内置layout无法满足特殊的排布需求（比如子图表尺寸不一致、需要偏移对齐等），可以通过信号计算每个子图表的坐标参数，直接控制每个子图表对应group的x/y/width/height属性：

• 水平排布：所有子图表y统一设为0，x按前序所有子图表的宽度+间距累加
• 垂直排布：所有子图表x统一设为0，y按前序所有子图表的高度+间距累加
• 网格排布：按索引计算行列位置，公式如下
  • 列索引 = 当前子图表序号 % 列数
  • 行索引 = 向下取整(当前子图表序号 / 列数)
  • x坐标 = 列索引 * (单图表宽度 + 列间距)
  • y坐标 = 行索引 * (单图表高度 + 行间距)

优化提示 #

• 多个子图表需要共享坐标轴时，可以把公共坐标轴抽为顶层mark，避免重复定义同时保证对齐精度
• 需要自适应容器宽度时，可以把单图表宽度设为信号，通过容器宽度、列数、间距自动计算：(容器宽度 - (列数-1)*列间距) / 列数
• 混排不同尺寸的子图表时，单独给对应group设置宽高即可，无需所有子图表尺寸统一

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