如何设置Vega-Lite区间选择仅在鼠标松开时触发筛选生效

最简实现（Vega-Lite 5.0及以上版本） #

直接在你的interval类型选择器配置中添加continuous: false参数即可，不需要额外编写事件逻辑：

"selection": {
  "brush": {
    "type": "interval",
    "encodings": ["x"],
    "continuous": false,
    "mark": {"fillOpacity": 0.1, "stroke": "#333"}
  }
}

效果说明：

• 拖拽过程中底部图表的选框会正常跟随鼠标移动，完全保留原生的操作视觉反馈，不会出现选框卡顿、不跟手的问题
• 拖拽全程所有绑定该选择器的筛选、联动逻辑都不会触发，不会出现顶部图表实时跳动的情况
• 仅当用户松开鼠标完成区间选择后，选择器的范围值才会正式更新，一次性触发顶部图表的筛选渲染
• 该配置同时适配滚轮缩放区间的交互，缩放动作停止后才会触发联动更新

低版本兼容方案（Vega-Lite 5.0以下版本） #

如果你的项目使用的Vega-Lite版本较低不支持continuous参数，可以通过信号中转的方式实现相同效果：

• 保留底部图表interval选择器的默认配置，保证选框拖拽的交互体验和原生一致
• 新增独立信号存储最终确认的区间范围，不直接用选择器的值做筛选
• 监听全局鼠标松开事件，仅在事件触发时把当前选择器的区间值同步到存储信号
• 顶部图表的筛选逻辑绑定到存储信号，实现拖拽不更新、松开才刷新的效果
  核心配置片段参考：

{
  "signals": [
    {"name": "final_x_start", "value": null},
    {"name": "final_x_end", "value": null},
    {
      "name": "sync_brush_value",
      "on": [
        {
          "events": {"source": "window", "type": "mouseup"},
          "update": "brush.x ? (final_x_start = brush.x[0], final_x_end = brush.x[1]) : final_x_start"
        }
      ]
    }
  ],
  "vconcat": [
    {
      // 顶部时序图配置
      "transform": [
        {"filter": "final_x_start == null || (datum.date >= final_x_start && datum.date <= final_x_end)"}
      ]
      // 其余mark、encoding配置和原有逻辑保持一致即可
    },
    {
      // 底部区间选择图表配置
      "selection": {
        "brush": {"type": "interval", "encodings": ["x"]}
      }
      // 其余mark、encoding配置和原有逻辑保持一致即可
    }
  ]
}

配置提示：如果你的x轴对应字段不是date，把筛选判断里的字段名替换为你实际使用的时间字段即可；初始状态下final_x_start为null，会默认展示全量数据，和原示例的初始展示效果完全一致。

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