Vega-Lite实现X、Y轴分条件滚轮缩放功能的方案咨询

问题根源 #

你当前配置失效的核心原因有两个：

1. 两个interval selection使用了相同的grid作为键名，JSON规范中同层级的重复键会被后定义的内容直接覆盖，所以你写的第一个X轴缩放规则直接被第二个Y轴规则覆盖，自然不会生效。
2. 你没有给X轴的缩放规则添加非Ctrl键按下的触发限制，即使重名问题修复后也可能出现两个规则同时触发的冲突。

可行解决方案 #

将两个selection设置不同的命名，同时给两个缩放规则补充互斥的触发条件即可，修改后的配置参考如下：

"layer": [
  {
    "selection": {
      "grid_x": {
        "type": "interval",
        "bind": "scales",
        "clip": true,
        "encodings": ["x"],
        "zoom": "wheel![!event.ctrlKey]"
      },
      "grid_y": {
        "type": "interval",
        "bind": "scales",
        "clip": true,
        "encodings": ["y"],
        "zoom": "wheel![event.ctrlKey]"
      }
    },
    "mark": {
      "type": "line",
      "point": false,
      "tooltip": true,
      "color": "#0f32a3"
    },
    "encoding": {
      "y": {
        "field": "y",
        "type": "quantitative",
        "axis": {"title": ""},
        "title": ""
      },
      "x": {
        "field": "x",
        "type": "quantitative",
        "axis": {"title": "x"},
        "title": "x"
      }
    }
  }
]

修改后即可实现普通滚轮只缩放X轴、按住Ctrl键滚动滚轮只缩放Y轴的效果，两个规则不会互相干扰。

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