Vega中使用group标记实现图表拼接（横向、纵向）

你当前的代码中两个group标记默认从画布原点(0,0)位置渲染，因此出现重叠。要实现并排或上下排列，需调整分组的位置、尺寸，并将比例尺、坐标轴封装到每个分组内部，确保子图独立适配自身空间。

关键修改：

• 全局宽度设为800（原宽度的2倍），每个分组宽度设为width/2
• 第二个分组添加x偏移量width/2，定位到右侧区域
• 将比例尺、坐标轴移至每个分组内部，确保子图的比例尺适配自身宽度

完整代码：

{
  "$schema": "https://vega.github.io/schema/vega/v5.json",
  "description": "Two bar charts displayed side by side.",
  "width": 800,
  "height": 200,
  "padding": 5,

  "data": [
    {
      "name": "table",
      "values": [
        {"category": "A", "amount": 28},
        {"category": "B", "amount": 55},
        {"category": "C", "amount": 43},
        {"category": "D", "amount": 91},
        {"category": "E", "amount": 81},
        {"category": "F", "amount": 53},
        {"category": "G", "amount": 19},
        {"category": "H", "amount": 87}
      ]
    }
  ],

  "marks": [
    {
      "type": "group",
      "name": "table1",
      "style": "cell",
      "title": {"text": "First Bar Plot", "frame": "group"},
      "encode": {
        "update": {
          "width": {"signal": "width/2"},
          "height": {"signal": "height"}
        }
      },
      "scales": [
        {
          "name": "xscale",
          "type": "band",
          "domain": {"data": "table", "field": "category"},
          "range": "width",
          "padding": 0.05,
          "round": true
        },
        {
          "name": "yscale",
          "domain": {"data": "table", "field": "amount"},
          "nice": true,
          "range": "height"
        }
      ],
      "axes": [
        { "orient": "bottom", "scale": "xscale" },
        { "orient": "left", "scale": "yscale" }
      ],
      "marks":[
        {
          "type": "rect",
          "from": {"data":"table"},
          "encode": {
            "enter": {
              "x": {"scale": "xscale", "field": "category"},
              "width": {"scale": "xscale", "band": 1},
              "y": {"scale": "yscale", "field": "amount"},
              "y2": {"scale": "yscale", "value": 0}
            },
            "update": {
              "fill": {"value": "steelblue"}
            },
            "hover": {
              "fill": {"value": "red"}
            }
          }
        }
      ]
    },

    {
      "type": "group",
      "name": "table2",
      "style": "cell",
      "title": {"text": "Second Bar Plot"},
      "encode": {
        "update": {
          "x": {"signal": "width/2"},
          "width": {"signal": "width/2"},
          "height": {"signal": "height"}
        }
      },
      "scales": [
        {
          "name": "xscale",
          "type": "band",
          "domain": {"data": "table", "field": "category"},
          "range": "width",
          "padding": 0.05,
          "round": true
        },
        {
          "name": "yscale",
          "domain": {"data": "table", "field": "amount"},
          "nice": true,
          "range": "height"
        }
      ],
      "axes": [
        { "orient": "bottom", "scale": "xscale" },
        { "orient": "left", "scale": "yscale" }
      ],
      "marks":[
        {
          "type": "rect",
          "from": {"data":"table"},
          "encode": {
            "enter": {
              "x": {"scale": "xscale", "field": "category"},
              "width": {"scale": "xscale", "band": 1},
              "y": {"scale": "yscale", "field": "amount"},
              "y2": {"scale": "yscale", "value": 0}
            },
            "update": {
              "fill": {"value": "steelblue"}
            },
            "hover": {"fill": {"value": "red"}
            }
          }
        }
      ]
    }
  ]
}

关键修改：

• 全局高度设为400（原高度的2倍），每个分组高度设为height/2
• 第二个分组添加y偏移量height/2，定位到下方区域
• 将比例尺、坐标轴移至每个分组内部，确保子图的比例尺适配自身高度

完整代码：

{
  "$schema": "https://vega.github.io/schema/vega/v5.json",
  "description": "Two bar charts displayed vertically.",
  "width": 400,
  "height": 400,
  "padding": 5,

  "data": [
    {
      "name": "table",
      "values": [
        {"category": "A", "amount": 28},
        {"category": "B", "amount": 55},
        {"category": "C", "amount": 43},
        {"category": "D", "amount": 91},
        {"category": "E", "amount": 81},
        {"category": "F", "amount": 53},
        {"category": "G", "amount": 19},
        {"category": "H", "amount": 87}
      ]
    }
  ],

  "marks": [
    {
      "type": "group",
      "name": "table1",
      "style": "cell",
      "title": {"text": "First Bar Plot", "frame": "group"},
      "encode": {
        "update": {
          "width": {"signal": "width"},
          "height": {"signal": "height/2"}
        }
      },
      "scales": [
        {
          "name": "xscale",
          "type": "band",
          "domain": {"data": "table", "field": "category"},
          "range": "width",
          "padding": 0.05,
          "round": true
        },
        {
          "name": "yscale",
          "domain": {"data": "table", "field": "amount"},
          "nice": true,
          "range": "height"
        }
      ],
      "axes": [
        { "orient": "bottom", "scale": "xscale" },
        { "orient": "left", "scale": "yscale" }
      ],
      "marks":[
        {
          "type": "rect",
          "from": {"data":"table"},
          "encode": {
            "enter": {
              "x": {"scale": "xscale", "field": "category"},
              "width": {"scale": "xscale", "band": 1},
              "y": {"scale": "yscale", "field": "amount"},
              "y2": {"scale": "yscale", "value": 0}
            },
            "update": {
              "fill": {"value": "steelblue"}
            },
            "hover": {
              "fill": {"value": "red"}
            }
          }
        }
      ]
    },

    {
      "type": "group",
      "name": "table2",
      "style": "cell",
      "title": {"text": "Second Bar Plot"},
      "encode": {
        "update": {
          "y": {"signal": "height/2"},
          "width": {"signal": "width"},
          "height": {"signal": "height/2"}
        }
      },
      "scales": [
        {
          "name": "xscale",
          "type": "band",
          "domain": {"data": "table", "field": "category"},
          "range": "width",
          "padding": 0.05,
          "round": true
        },
        {
          "name": "yscale",
          "domain": {"data": "table", "field": "amount"},
          "nice": true,
          "range": "height"
        }
      ],
      "axes": [
        { "orient": "bottom", "scale": "xscale" },
        { "orient": "left", "scale": "yscale" }
      ],
      "marks":[
        {
          "type": "rect",
          "from": {"data":"table"},
          "encode": {
            "enter": {
              "x": {"scale": "xscale", "field": "category"},
              "width": {"scale": "xscale", "band": 1},
              "y": {"scale": "yscale", "field": "amount"},
              "y2": {"scale": "yscale", "value": 0}
            },
            "update": {
              "fill": {"value": "steelblue"}
            },
            "hover": {"fill": {"value": "red"}
            }
          }
        }
      ]
    }
  ]
}

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