如何在网页中关联多个独立Vega图表并实现响应式？

你遇到的Cannot find a selection named "selector002"错误，本质是因为两个独立渲染的Vega-Lite图表拥有各自独立的作用域——第一个图表里定义的选择器selector002只存在于它自己的视图实例中，第二个图表无法跨实例访问这个选择器。下面给你两种符合需求的解决方案：

方案一：独立图表间同步交互状态 #

如果坚持要把图表放在不同的响应式区块中，可以通过Vega的View API手动监听并同步两个图表的选择器状态。具体步骤如下：

1. 在HTML中为两个图表准备独立的容器：

<div id="chart1"></div>
<div id="chart2"></div>

2. 用JavaScript渲染两个图表，并添加选择器同步逻辑：

// 图表1配置（提取共享数据集，避免重复定义）
const spec1 = {
  "config": { "view": { "continuousWidth": 400, "continuousHeight": 300 } },
  "data": { "name": "shared-data" },
  "mark": "point",
  "encoding": {
    "x": { "type": "quantitative", "field": "A" },
    "y": { "type": "quantitative", "field": "B" }
  },
  "selection": { "selector002": { "type": "interval", "encodings": [ "x" ] } },
  "width": "container",
  "$schema": "https://vega.github.io/schema/vega-lite/v4.8.1.json"
};

// 图表2配置
const spec2 = {
  "config": { "view": { "continuousWidth": 400, "continuousHeight": 300 } },
  "data": { "name": "shared-data" },
  "mark": "bar",
  "encoding": {
    "color": { "type": "ordinal", "field": "B" },
    "x": { "type": "quantitative", "field": "A" },
    "y": { "type": "ordinal", "field": "C" }
  },
  "transform": [ { "filter": { "selection": "selector002" } } ],
  "width": "container",
  "$schema": "https://vega.github.io/schema/vega-lite/v4.8.1.json"
};

// 共享数据集
const sharedData = [
  { "A": 0.1, "B": 0.5, "C": 1.0 },
  { "A": 0.1, "B": 0.8, "C": 0.0 },
  { "A": 0.0, "B": 1.0, "C": 1.0 },
  { "A": 0.2, "B": 0.8, "C": 1.0 },
  { "A": 0.2, "B": 0.9, "C": 0.0 }
];

// 渲染图表1并同步状态到图表2
vegaEmbed('#chart1', spec1, {actions: false})
  .then(res1 => {
    vegaEmbed('#chart2', spec2, {actions: false})
      .then(res2 => {
        // 监听图表1的选择器变化，同步到图表2
        res1.view.addSignalListener('selector002', (name, value) => {
          res2.view.signal(name, value).run();
        });

        // 给两个视图注册共享数据集
        res1.view.data('shared-data', sharedData).run();
        res2.view.data('shared-data', sharedData).run();
      });
  });

这样两个独立图表就能同步选择器状态，同时各自使用width: "container"实现响应式布局。

方案二：让vconcat组合图表适配父容器 #

如果可以接受用vconcat组合图表，其实可以通过信号动态计算宽度+autosize属性实现响应式。修改后的配置如下：

{
  "$schema": "https://vega.github.io/schema/vega-lite/v4.8.1.json",
  "autosize": { "type": "fit", "contains": "padding" },
  "signals": [
    {
      "name": "containerWidth",
      "update": "containerSize()[0]"
    }
  ],
  "vconcat": [
    {
      "config": { "view": { "continuousWidth": 400, "continuousHeight": 300 } },
      "data": { "name": "data-07d1121d4bb402da807ced7f89269752" },
      "mark": "point",
      "encoding": {
        "x": { "type": "quantitative", "field": "A" },
        "y": { "type": "quantitative", "field": "B" }
      },
      "selection": { "selector002": { "type": "interval", "encodings": [ "x" ] } },
      "width": {"signal": "containerWidth"}
    },
    {
      "config": { "view": { "continuousWidth": 400, "continuousHeight": 300 } },
      "data": { "name": "data-07d1121d4bb402da807ced7f89269752" },
      "mark": "bar",
      "encoding": {
        "color": { "type": "ordinal", "field": "B" },
        "x": { "type": "quantitative", "field": "A" },
        "y": { "type": "ordinal", "field": "C" }
      },
      "transform": [ { "filter": { "selection": "selector002" } } ],
      "width": {"signal": "containerWidth"}
    }
  ],
  "datasets": {
    "data-07d1121d4bb402da807ced7f89269752": [
      { "A": 0.1, "B": 0.5, "C": 1.0 },
      { "A": 0.1, "B": 0.8, "C": 0.0 },
      { "A": 0.0, "B": 1.0, "C": 1.0 },
      { "A": 0.2, "B": 0.8, "C": 1.0 },
      { "A": 0.2, "B": 0.9, "C": 0.0 }
    ]
  }
}

关键改动：

• 添加autosize: {type: "fit", contains: "padding"}让图表自动适配父容器尺寸
• 定义containerWidth信号实时获取容器宽度，子图表的width绑定该信号
• 组合图表内的选择器可直接跨子图表访问，无需额外同步逻辑

这样整个vconcat图表就能跟随父容器的尺寸变化，同时保留交互联动效果。

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