Deneb Vega-Lite：如何为hconcat图表设置差异化间距？

Vega-Lite原生的hconcat全局spacing参数只能设置统一间距，但可以通过两种方法实现差异化间距：

方法1：嵌套hconcat分组控制间距 #

将需要统一间距的图表先嵌套到内层hconcat中，分别为内层和外层hconcat设置不同的spacing值，以此区分不同组之间的间距。

示例代码：

{
  "$schema": "https://vega.github.io/schema/vega-lite/v5.json",
  "hconcat": [
    // 内层hconcat：包含图表1和图表2，设置小间距
    {
      "hconcat": [
        {
          "mark": "bar",
          "data": {"values": [{"a": "A", "b": 28}]},
          "encoding": {
            "x": {"field": "a", "type": "nominal"},
            "y": {"field": "b", "type": "quantitative"}
          }
        },
        {
          "mark": "bar",
          "data": {"values": [{"a": "B", "b": 55}]},
          "encoding": {
            "x": {"field": "a", "type": "nominal"},
            "y": {"field": "b", "type": "quantitative"}
          }
        }
      ],
      "spacing": 10 // 图表1与图表2的间距
    },
    // 图表3
    {
      "mark": "bar",
      "data": {"values": [{"a": "C", "b": 43}]},
      "encoding": {
        "x": {"field": "a", "type": "nominal"},
        "y": {"field": "b", "type": "quantitative"}
      }
    }
  ],
  "spacing": 50 // 图表组合与图表3的间距
}

方法2：插入透明空白元素模拟间距 #

在需要设置差异化间距的位置，插入一个透明的rect或空文本标记，通过设置width来控制该位置的间距大小。这种方法可以精确控制每一对图表之间的间距。

示例代码：

{
  "$schema": "https://vega.github.io/schema/vega-lite/v5.json",
  "hconcat": [
    // 图表1
    {
      "mark": "bar",
      "data": {"values": [{"a": "A", "b": 28}]},
      "encoding": {
        "x": {"field": "a", "type": "nominal"},
        "y": {"field": "b", "type": "quantitative"}
      }
    },
    // 图表1与2之间的空白（宽度10）
    {
      "mark": {"type": "rect", "fill": "transparent"},
      "width": 10,
      "height": {"step": 20} // 匹配图表高度，确保布局对齐
    },
    // 图表2
    {
      "mark": "bar",
      "data": {"values": [{"a": "B", "b": 55}]},
      "encoding": {
        "x": {"field": "a", "type": "nominal"},
        "y": {"field": "b", "type": "quantitative"}
      }
    },
    // 图表2与3之间的空白（宽度50）
    {
      "mark": {"type": "rect", "fill": "transparent"},
      "width": 50,
      "height": {"step": 20}
    },
    // 图表3
    {
      "mark": "bar",
      "data": {"values": [{"a": "C", "b": 43}]},
      "encoding": {
        "x": {"field": "a", "type": "nominal"},
        "y": {"field": "b", "type": "quantitative"}
      }
    }
  ]
}

两种方法的适用场景：

• 嵌套分组法适合图表有明确分组的情况，代码结构更简洁；
• 空白元素法适合需要精准控制每一处间距的场景，灵活性更高。

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