如何通过JavaScript手动触发Vega-Lite图表事件？

直接派发DOM事件无法触发Vega-Lite的可视化状态变更，原因是Vega-Lite的交互依赖内部封装的事件上下文（关联数据、元素信息等），单纯的DOM事件缺少这些关键信息。你需要使用Vega官方提供的View API来手动触发事件：

核心方法：使用View的dispatch API #

Vega的View实例（你的代码中是results.view）提供了dispatch方法，这是触发交互的正确方式，无需手动派发DOM事件。

步骤示例 #

1. 构造事件详情：需要指定事件目标的上下文（如对应的数据datum、标记名称等）
2. 调用dispatch方法：传入事件类型和详情，最后执行run()完成触发

示例1：针对特定数据触发点击

// 假设你要触发交互的目标数据对象
const targetDatum = { category: "A", value: 40 };

// 构造事件参数
const eventParams = {
  target: {
    datum: targetDatum,
    name: "bar" // 对应Vega-Lite配置中mark的name属性
  }
};

// 触发点击事件
results.view.dispatch("click", eventParams).run();

示例2：通过标记查询触发事件

如果你不知道目标数据，可以先查询可视化元素：

// 查询名称为"bar"的所有标记元素
results.view.queryMarks("bar").then(marks => {
  if (marks.length > 0) {
    // 触发第一个标记的点击事件
    results.view.dispatch("click", { target: marks[0] }).run();
  }
});

为什么DOM事件无法生效？ #

Vega-Lite在处理交互时，会把原生DOM事件包装成包含数据、元素元信息的内部事件对象。直接派发的DOM事件没有这些关联信息，所以即使监听器能捕获到，也无法触发对应的状态变更（如选中、高亮等）。

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