Vega-lite 中的 X 和 Y 笔刷缩放

Question

在Vega-lite中，是否可以同时在X和Y方向上用画笔放大绘图？使用此示例作为基础： https://vega.github.io/vega-lite/examples/interactive_overview_detail.html

我尝试对 Y 轴进行编码，但我不确定如何将 "scale": {"domain": {"selection": "brush"}} 指向 Y 轴方向。

unexpected result

如果不是，是否可以用 "bind": "scales" 获得类似的结果？目标是使图表的 "key-map" 具有放大功能，并有一个小框显示放大在更广泛的时间序列上的位置。

我一直在尝试使用该示例的代码：

{
  "$schema": "https://vega.github.io/schema/vega-lite/v4.json",
  "data": {"url": "data/sp500.csv"},
  "vconcat": [{
    "width": 480,
    "mark": "area",
    "encoding": {
      "x": {
        "field": "date",
        "type": "temporal",
        "scale": {"domain": {"selection": "brush"}},
        "axis": {"title": ""}
      },
      "y": {"field": "price", 
      "type": "quantitative",
      "scale": {"domain": {"selection": "brush"}}
}
    }
  }, {
    "width": 480,
    "height": 60,
    "mark": "area",
    "selection": {
      "brush": {"type": "interval", "encodings": ["x","y"]}
    },
    "encoding": {
      "x": {
        "field": "date",
        "type": "temporal"
      },
      "y": {
        "field": "price",
        "type": "quantitative",
        "axis": {"tickCount": 3, "grid": false}
      }
    }
  }]
}`

Answer 1

您可以通过在域中指定 field 或 encoding 来实现；例如：

"domain": {"selection": "brush", "encoding": "y"}

将其放入您的示例中如下所示 (view live):

{
  "$schema": "https://vega.github.io/schema/vega-lite/v4.json",
  "data": {"url": "data/sp500.csv"},
  "vconcat": [
    {
      "width": 480,
      "mark": "area",
      "encoding": {
        "x": {
          "field": "date",
          "type": "temporal",
          "scale": {"domain": {"selection": "brush", "encoding": "x"}},
          "axis": {"title": ""}
        },
        "y": {
          "field": "price",
          "type": "quantitative",
          "scale": {"domain": {"selection": "brush", "encoding": "y"}}
        }
      }
    },
    {
      "width": 480,
      "height": 60,
      "mark": "area",
      "selection": {"brush": {"type": "interval", "encodings": ["x", "y"]}},
      "encoding": {
        "x": {"field": "date", "type": "temporal"},
        "y": {
          "field": "price",
          "type": "quantitative",
          "axis": {"tickCount": 3, "grid": false}
        }
      }
    }
  ]
}

Vega-lite 中的 X 和 Y 笔刷缩放

Brush zooming in X and Y in Vega-lite

vega-lite