如何 link 仅在水平轴上使用 vega-lite 绘制多个图？

Question

我测试过这个： https://vega.github.io/editor/?#/url/vega-lite/N4IgJAzgxgFgpgWwIYgFwhgF0wBwqgegIDc4BzJAOjIEtMYBXAI0poHsDp5kTykBaADZ04JACyUAVhDYA7EABoQAEySYUqUAwBOgtCrVJOmNlADWESlAjEQAXyXEocqGrQBtUJm1JZEAGZs2ggeoP40gphw2vqqmAwIlBAAnghMbIIAvNkA5ACSAEIAsjn2ALpKyNpm+sKycIogcLLOyjSyZGigAB5dIOFwgsqxag1KmMk4DehRCDhBSHoOIMl9A0P6ONo0UGMgE1P6AI4Mvph0ajSk9ssQg3BQ53J92uTs8pr7k9Mg7VHaxEWjSY7WG6GgizgEBuDi8Pj8gWCoX6EX+I3iiRSaQy2UyOQA4gB5Qn40p2CogKo1dB1PbNVrtTqfXqfdZggxRRoHH6zeY+JZKVasmiDdlbHZ7bnHU6yc7qc7XOy3e6Pd4vN7PT5S9B-aKAvRKEGydkQwRQmEU14yQTXT6m6Y9fQQGBIV7DJV2IA

但没有成功，因为垂直轴也已链接。还有一种方法可以将滚轮缩放限制在一个轴上吗？

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

如果您想在每个图表中使用独立的 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"}}
}

如何 link 仅在水平轴上使用 vega-lite 绘制多个图？

How to link multiple plots with vega-lite only on horizontal axis?

vega-lite