如何在Vega-Lite串联图中共享含时间聚合的X轴并同步交互

要解决vconcat布局下两个不同时间粒度子图的X轴对齐和交互同步问题，核心是通过共享信号统一控制两个子图的X轴范围，同时将交互操作绑定到这个信号上。以下是具体实现步骤和完整示例：

核心实现逻辑 #

• 定义一个共享的时间范围信号xDomain，用于同步两个子图的X轴可视区间
• 两个子图的X轴都绑定到这个共享信号，确保轴范围完全一致
• 在任意一个子图上添加区间选择（interval）交互，触发时更新共享信号，实现同步缩放平移

完整示例代码 #

{
  "$schema": "https://vega.github.io/schema/vega-lite/v5.json",
  "data": {
    "values": [
      {"date": "2020-01-15", "amount": 100, "value": 20},
      {"date": "2020-02-20", "amount": 150, "value": 25},
      {"date": "2020-04-10", "amount": 80, "value": 18},
      {"date": "2020-05-05", "amount": 200, "value": 30},
      {"date": "2020-07-22", "amount": 120, "value": 22},
      {"date": "2020-08-30", "amount": 160, "value": 28},
      {"date": "2021-01-10", "amount": 90, "value": 19},
      {"date": "2021-03-18", "amount": 170, "value": 27}
    ]
  },
  "signals": [
    {
      "name": "xDomain",
      "update": "data('source_0')[0] ? [extent(data('source_0'), 'date')] : []"
    }
  ],
  "vconcat": [
    {
      "mark": "bar",
      "encoding": {
        "x": {
          "field": "date",
          "timeUnit": "yearquarter",
          "type": "temporal",
          "axis": {"title": "季度"},
          "scale": {"domain": {"signal": "xDomain"}}
        },
        "y": {
          "aggregate": "sum",
          "field": "amount",
          "type": "quantitative",
          "axis": {"title": "总金额"}
        }
      }
    },
    {
      "mark": "point",
      "selection": {
        "xBrush": {
          "type": "interval",
          "encodings": ["x"],
          "on": "[mousedown, window:mouseup] > window:mousemove!",
          "translate": "[mousedown, window:mouseup] > window:mousemove!",
          "zoom": "wheel!",
          "clear": "dblclick"
        }
      },
      "encoding": {
        "x": {
          "field": "date",
          "type": "temporal",
          "axis": {"title": "日期"},
          "scale": {"domain": {"signal": "xDomain"}}
        },
        "y": {
          "field": "value",
          "type": "quantitative",
          "axis": {"title": "单条数据值"}
        }
      },
      "transform": [
        {
          "signal": "xDomain = xBrush.x || extent(data('source_0'), 'date')"
        }
      ]
    }
  ],
  "config": {"axis": {"labelAngle": 0}}
}

效果说明 #

1. 自动对齐：两个子图的X轴会基于数据的完整时间范围自动对齐，无需手动设置固定范围
2. 同步交互：在下方的点图上进行缩放（滚轮）或平移（拖拽）操作时，上方的柱状图会同步更新X轴范围；双击可重置回完整范围
3. 粒度适配：上方子图按季度聚合展示总和，下方展示原始日期的单条数据，时间轴会自动匹配区间，不会出现错位

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