React组件渲染Vega-Lite图表时图例交互性丢失问题排查

问题背景 #

以下Vega-Lite配置生成的图表在官方编辑器中可正常渲染，且图例交互（点击/悬停图例高亮对应线条）功能正常，但通过自定义React组件渲染时，图例交互完全失效。已尝试升级Vega-Lite到5.19.0、Vega到5.30.0（与官方编辑器版本一致），问题仍未解决。

Vega-Lite 配置代码 #

{
  "$schema": "https://vega.github.io/schema/vega-lite/v5.json",
  "description": "A simple bar chart with embedded data.",
  "data": {
    "values": [
      {"date": "2024-05-13", "A": 10, "B": 20, "C": 30},
      {"date": "2024-05-14", "A": 15, "B": 25, "C": 35},
      {"date": "2024-05-15", "A": 20, "B": 30, "C": 40},
      {"date": "2024-05-16", "A": 25, "B": 35, "C": 45},
      {"date": "2024-05-17", "A": 30, "B": 40, "C": 50}
    ]
  },
  "params": [
    {
      "name": "LEGEND_HIGHLIGHT",
      "select": {"type": "point", "fields": ["combinedColumn"]},
      "views": ["CHART_0"],
      "bind": "legend"
    }
  ],
  "layer": [
    {
      "transform": [
        {"fold": ["A", "B"], "as": ["combinedColumn", "value"]}
      ],
      "encoding": {
        "x": {"field": "date", "type": "ordinal"},
        "color": {"field": "combinedColumn", "type": "nominal"},
        "opacity": {
          "condition": {"param": "LEGEND_HIGHLIGHT", "value": 1},
          "value": 0.2
        }
      },
      "layer": [
        {
          "name": "CHART_0",
          "transform": [{"filter": "datum.combinedColumn == 'A'"}],
          "mark": {"type": "line", "tooltip": true},
          "encoding": {"y": {"field": "value", "type": "quantitative"}}
        },
        {
          "transform": [{"filter": "datum.combinedColumn == 'B'"}],
          "mark": {"type": "line", "tooltip": true},
          "encoding": {"y": {"field": "value", "type": "quantitative"}}
        }
      ]
    }
  ]
}

问题React渲染组件代码 #

import React from 'react';
import * as vega from 'vega';
import { compile } from 'vega-lite';
import cloneDeep from 'lodash/cloneDeep';
interface IProps {
  id: string;
  vegaSpec: any;
}

interface IState {
  id: string;
}

class VegaRenderer extends React.PureComponent<IProps, IState> {
  constructor(props: IProps) {
    super(props);
    this.state = {
      id: props.id,
    };
  }

  render() {
    const { id } = this.props;
    return (
        <div className="vega-graph-container">
          <div id={id}></div>
        </div>
    );
  }

  componentDidMount() {
    if (typeof this.props.vegaSpec != 'object') {
      return;
    }
    this.renderVega(this.props.id);
  }

  componentDidUpdate(previousProps: any, previousState: any) {
    if (typeof this.props.vegaSpec != 'object') {
      return;
    }
    this.renderVega(this.props.id);
  }

  async renderVega(id: string) {
    let spec = cloneDeep(this.props.vegaSpec);
    let view;
    let runtime;
    try {
      const vegaSpec = compile(spec).spec;
      runtime = vega.parse(vegaSpec);
      view = new vega.View(runtime)
        .logLevel(vega.Warn)
        .initialize(document.querySelector(`#${id}`))
        .renderer('svg');
      view.hover();
      await view.runAsync();
    } catch (err) {
      console.error(err);
      throw err;
    } finally {
        if (view) {
          // Releasing memory
          view.finalize();
        }
    }
  }
}

export default VegaRenderer;

问题原因 #

问题出在renderVega方法的finally块中：view.finalize()会立即销毁Vega视图实例，释放所有相关资源（包括交互事件监听器）。虽然await view.runAsync()完成了图表渲染，但后续的finalize()直接移除了所有交互功能，导致图例点击/悬停失效。

修复方案 #

需要将视图资源释放的逻辑移到组件卸载阶段，而非渲染完成后立即执行。具体步骤：

1. 在组件中保存Vega View实例的引用
2. 在componentWillUnmount钩子中调用view.finalize()释放资源
3. 组件更新时，先销毁旧视图，再渲染新视图

修改后的组件代码 #

import React from 'react';
import * as vega from 'vega';
import { compile } from 'vega-lite';
import cloneDeep from 'lodash/cloneDeep';

interface IProps {
  id: string;
  vegaSpec: any;
}

class VegaRenderer extends React.PureComponent<IProps> {
  // 保存Vega View实例引用
  private view: vega.View | null = null;

  render() {
    const { id } = this.props;
    return (
      <div className="vega-graph-container">
        <div id={id}></div>
      </div>
    );
  }

  componentDidMount() {
    if (typeof this.props.vegaSpec !== 'object') return;
    this.renderVega(this.props.id);
  }

  componentDidUpdate(previousProps: IProps) {
    if (typeof this.props.vegaSpec !== 'object') return;
    // 组件更新时，先销毁旧视图
    if (this.view) {
      this.view.finalize();
    }
    this.renderVega(this.props.id);
  }

  componentWillUnmount() {
    // 组件卸载时释放资源
    if (this.view) {
      this.view.finalize();
      this.view = null;
    }
  }

  async renderVega(id: string) {
    const spec = cloneDeep(this.props.vegaSpec);
    try {
      const vegaSpec = compile(spec).spec;
      const runtime = vega.parse(vegaSpec);
      this.view = new vega.View(runtime)
        .logLevel(vega.Warn)
        .initialize(document.querySelector(`#${id}`))
        .renderer('svg');
      this.view.hover();
      await this.view.runAsync();
    } catch (err) {
      console.error(err);
      throw err;
    }
  }
}

export default VegaRenderer;

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