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?
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"]
}
}
}