vega-lite: enable two zoom actions

Question

I am trying here to zoom on a different axis by using wheel! or wheel![event.ctrlKey] to discriminate between the axis that has to be zoomed.

  "layer": [
    {
      "selection": {
        "grid": {
          "type": "interval",
          "bind": "scales",
          "clip": true,
          "encodings": ["x"],
          "zoom": "wheel!"
        },
        "grid": {
          "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"
        }
      }
    },

But the latter action inhibits the first one. Is there a way to achieve this?

Answer 1

First of all, you'll need distinct names for your selections, so perhaps you could use "grid_x" and "grid_y" .

And if you want the control key to toggle between these zoom modes, you can do so by using "wheel![event.ctrlKey]" for one, and "wheel![!event.ctrlKey]" for the other.

Here's a short example ( open in editor ):

{
  "data": {"url": "data/cars.json"},
  "mark": "point",
  "encoding": {
    "color": {"type": "nominal", "field": "Origin"},
    "x": {"type": "quantitative", "field": "Horsepower"},
    "y": {"type": "quantitative", "field": "Miles_per_Gallon"}
  },
  "selection": {
    "grid_x": {
      "type": "interval",
      "bind": "scales",
      "zoom": "wheel![event.ctrlKey]",
      "encodings": ["x"]
    },
    "grid_y": {
      "type": "interval",
      "bind": "scales",
      "zoom": "wheel![!event.ctrlKey]",
      "encodings": ["y"]
    }
  }
}