Vega-Lite使用hconcat时如何固定左侧Y轴仅让右侧图表横向滚动？

实现固定Y轴、仅右侧图表横向滚动的配置 #

你需要统一两个子图的Y轴配置，隐藏冗余元素，再绑定轴同步规则，修改后完整代码如下：

{
  "$schema": "https://vega.github.io/schema/vega-lite/v5.json",
  "data": {"url": "data/cars.json"},
  "resolve": {"scale": {"y": "shared"}},
  "hconcat": [
    {
      "width": 50,
      "mark": {"type": "text", "opacity": 0},
      "encoding": {
        "y": {
          "field": "Cylinders",
          "type": "quantitative",
          "title": "气缸数"
        }
      }
    },
    {
      "width": 800,
      "mark": "line",
      "params": [
        {
          "name": "brush",
          "select": {"type": "interval", "encodings": ["x"], "bind": "scales"}
        }
      ],
      "encoding": {
        "x": {"field": "Year", "type": "temporal", "title": "年份"},
        "y": {
          "field": "Cylinders",
          "type": "quantitative",
          "axis": null
        }
      }
    }
  ]
}

核心修改点说明 #

• 新增resolve配置将两个子图的Y轴尺度设为共享，保证两者刻度永远完全对齐，左侧轴可直接作为右侧的固定参照
• 左侧子图仅保留Y轴：将标记透明度设为0隐藏冗余内容，宽度收窄到仅能放下Y轴，Y轴字段、类型配置和右侧完全一致
• 右侧子图隐藏自身Y轴（axis: null），避免重复显示
• 给brush选择器添加"bind": "scales"配置，实现横向拖动/滚动时仅X轴范围变化，Y轴保持固定，无需额外配置即可实现滚动查看效果

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