Bru sh увеличение X и Y в Vega-Lite

Question

В Vega-lite можно ли увеличить масштаб графика с помощью bru sh в направлениях X и Y одновременно? Используя этот пример в качестве основы: https://vega.github.io/vega-lite/examples/interactive_overview_detail.html

Я пытался кодировать Y, но я не уверен, как указать "scale": {"domain": {"selection": "brush"}} в направлении оси Y.

неожиданный результат

Если нет, возможно ли достичь аналогичных результатов с "bind": "scales"? Цель состоит в том, чтобы иметь «карту ключей» диаграммы с увеличенным масштабом и маленькое поле, показывающее, где масштаб находится в более широком временном ряду.

Код, который я пробовал на этом примере:

{
  "$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}
        }
      }
    }
  ]
}