如何仅在水平轴上使用vega-lite链接多个图?

时间:2020-06-18 20:25:12

标签: vega-lite

1 个答案:

答案 0 :(得分:1)

您可以通过指定所选内容的"encodings"属性来将比例尺绑定限制在单个轴上。例如,这仅将选择绑定到x轴(view in vega editor):

{
  "$schema": "https://vega.github.io/schema/vega-lite/v4.json",
  "data": {"url": "data/stocks.csv"},
  "vconcat": [
    {
      "transform": [{"filter": "datum.symbol==='IBM'"}],
      "mark": "line",
      "encoding": {
        "x": {"field": "date", "type": "temporal"},
        "y": {"field": "price", "type": "quantitative"}
      },
      "selection": {
        "region": {"type": "interval", "bind": "scales", "encodings": ["x"]}
      }
    },
    {
      "transform": [{"filter": "datum.symbol==='GOOG'"}],
      "mark": "line",
      "encoding": {
        "x": {"field": "date", "type": "temporal"},
        "y": {"field": "price", "type": "quantitative"}
      },
      "selection": {
        "region": {"type": "interval", "bind": "scales", "encodings": ["x"]}
      }
    }
  ],
  "resolve": {"scale": {"x": "shared", "y": "independent"}}
}

enter image description here

如果您希望在每个图表中使用独立的y比例绑定,并使用共享的x绑定,则可以通过在每个图表(vega editor)中添加新的独立绑定选择来做到这一点:

{
  "$schema": "https://vega.github.io/schema/vega-lite/v4.json",
  "data": {"url": "data/stocks.csv"},
  "vconcat": [
    {
      "transform": [{"filter": "datum.symbol==='IBM'"}],
      "mark": "line",
      "encoding": {
        "x": {"field": "date", "type": "temporal"},
        "y": {"field": "price", "type": "quantitative"}
      },
      "selection": {
        "y_scroll_1": {"type": "interval", "bind": "scales", "encodings": ["y"]},
        "x_scroll": {"type": "interval", "bind": "scales", "encodings": ["x"]}
      }
    },
    {
      "transform": [{"filter": "datum.symbol==='GOOG'"}],
      "mark": "line",
      "encoding": {
        "x": {"field": "date", "type": "temporal"},
        "y": {"field": "price", "type": "quantitative"}
      },
      "selection": {
        "y_scroll_2": {"type": "interval", "bind": "scales", "encodings": ["y"]},
        "x_scroll": {"type": "interval", "bind": "scales", "encodings": ["x"]}
      }
    }
  ],
  "resolve": {"scale": {"x": "shared", "y": "independent"}}
}