如何让共享X轴的多个vconcat图表实现选择完全同步？

核心需求 #

• 多个采用vconcat布局、共享X轴的图表，每个图表带选择标识标签
• 所有图表选择状态必须完全一致：
  • 任意图表创建选择，全图同步显示
  • 任意图表移除选择，全图同步清除
  • 选择绑定到x编码字段，而非图表刻度，确保不同图表（哪怕X轴范围/刻度不同）的选择逻辑统一

解决方案（Vega-Lite示例） #

通过定义全局共享的选择配置，让所有子图表引用同一选择规则，绑定x编码字段实现同步：

{
  "$schema": "https://vega.github.io/schema/vega-lite/v5.json",
  "selection": {
    "xSync": {
      "type": "interval",
      "encodings": ["x"],
      "bind": "scales"
    }
  },
  "vconcat": [
    {
      "mark": "bar",
      "data": {"url": "data/cars.json"},
      "encoding": {
        "x": {"field": "Horsepower", "type": "quantitative"},
        "y": {"field": "Miles_per_Gallon", "type": "quantitative"},
        "color": {"condition": {"selection": "xSync", "value": "orange"}, "value": "steelblue"}
      }
    },
    {
      "mark": "point",
      "data": {"url": "data/cars.json"},
      "encoding": {
        "x": {"field": "Horsepower", "type": "quantitative"},
        "y": {"field": "Acceleration", "type": "quantitative"},
        "color": {"condition": {"selection": "xSync", "value": "orange"}, "value": "steelblue"}
      }
    },
    {
      "mark": "line",
      "data": {"url": "data/cars.json"},
      "encoding": {
        "x": {"field": "Horsepower", "type": "quantitative"},
        "y": {"field": "Weight_in_lbs", "type": "quantitative"},
        "color": {"condition": {"selection": "xSync", "value": "orange"}, "value": "steelblue"}
      }
    }
  ]
}

关键说明 #

• selection.xSync定义全局区间选择，encodings: ["x"]明确绑定x编码字段，而非图表的像素刻度
• 每个子图表通过color.condition引用该选择，实现选中数据的高亮同步
• bind: "scales"保证选择的是数据范围，而非固定像素区间，适配不同图表的X轴尺度

效果示例 #

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