vega-lite：启用两个缩放操作

Question

我正在尝试 here 使用滚轮在不同的轴上进行缩放！或 wheel![event.ctrlKey] 来区分必须缩放的轴。

  "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"
        }
      }
    },

但是后一个动作抑制了第一个动作。有办法实现吗？

Answer 1

首先，您的选择需要不同的名称，因此也许您可以使用 "grid_x" 和 "grid_y"。

如果您希望控制键在这些缩放模式之间切换，您可以使用 "wheel![event.ctrlKey]" 和 "wheel![!event.ctrlKey]" 来实现。

这是一个简短的例子 (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"]
    }
  }
}

vega-lite：启用两个缩放操作

vega-lite: enable two zoom actions

vega-lite

vega