如何阻止Vega-Lite图表滚动器的双击事件，保留单击功能

方案1：通过Vega-Lite配置禁用双击默认行为 #

Vega-Lite默认双击画布会触发视图重置/缩放，进而导致全量数据重渲染。你可以通过配置明确排除双击事件的响应：

1. 针对滚动选择器，修改其事件监听规则：

"selection": {
  "scroll": {
    "type": "interval",
    "bind": "scales",
    // 仅响应单击相关事件，排除双击
    "on": "click! mousedown! mouseup!",
    "translate": "[mousedown, window:mouseup]"
  }
}

2. 或者全局禁用视图的双击行为：

"config": {
  "view": {
    "events": {
      "disable": ["dblclick"]
    }
  }
}

方案2：通过JavaScript阻止双击事件 #

如果配置方式无法满足需求，直接通过JS监听画布的双击事件，阻止其默认行为和冒泡，同时保留单击功能：

// 初始化Vega视图
const view = new vega.View(vega.parse(yourSpec))
  .renderer('canvas')
  .initialize('#yourChartContainer')
  .run();

// 获取图表的画布元素
const canvas = document.querySelector('#yourChartContainer canvas');

// 阻止双击事件的默认行为
canvas.addEventListener('dblclick', (event) => {
  event.preventDefault();
  event.stopPropagation();
});

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