vega-lite - 如何在具有相同比例的 2 个系列的 vega-lite 中添加辅助 Y 轴？

Question

我正在尝试构建这样的东西： example histogram with multiple Independent series

我有 2 个独立的 y 轴，左右方向。

使用的所有系列/图层"orient":"right"应共享相同的比例，使用的所有系列/图层"orient":"left"应共享相同的比例。

我知道此处记录"resolve"的选项， 但已阅读此如何将辅助 Y 轴添加到我的 vega-lite 图表？还有一堆其他问题，我找不到我的特定用例。

到目前为止，我的徒劳尝试看起来像这样： 在线编辑器 示例截图中的示例

{
  "$schema": "https://vega.github.io/schema/vega-lite/v2.json",
  "data": {"url": "data/movies.json"},
  "transform":[
    {"calculate":"datum.Production_Budget * 0.5","as":"y2"}
  ],
  "layer":[
    {
  "mark": "bar",
  "encoding": {
    "x": {
      "bin": true,
      "field": "IMDB_Rating",
      "type": "quantitative"
    },
    "y": {
      "axis":{"orient":"left","title":"# of movies","grid":false},
      "aggregate": "count",
      "type": "quantitative"
    }
  }},
     {
  "mark": "line",
  "encoding": {
    "x": {
      "bin": true,
      "field": "IMDB_Rating",
      "type": "quantitative"
    },
    "y": {
      "field":"Production_Budget",
      "aggregate": "average",
      "type": "quantitative",
      "axis":{"orient":"right","format":"s","title":"avg production budget in $"}
    }
  }
},
     {
  "mark": "line",
  "encoding": {
    "x": {
      "bin": true,
      "field": "IMDB_Rating",
      "type": "quantitative"
    },
    "y": {
      "field":"y2",
      "aggregate": "average",
      "type": "quantitative",
      "axis":{"orient":"right","format":"s","title":"avg production budget in $"}
    }
  }
}
  ]
  ,"resolve": {
    "scale":{"y":"independent"}
  }
}

我尝试过使用解决选项：

"resolve": {
"scale":{"axisLeft":"independent"}

}

"resolve": {
"axisLeft":{"y":"independent"}

}

  "resolve": {
"axis":{"left":"independent"}

}

但它们都不起作用。

Answer 1

您可以通过在图层中创建图层来做到这一点：orient: "right"单个图层中的两个图表具有共享轴，orient: "left"图表具有独立的比例：

vega 编辑器链接

{
  "$schema": "https://vega.github.io/schema/vega-lite/v2.json",
  "data": {"url": "data/movies.json"},
  "transform": [{"calculate": "datum.Production_Budget * 0.5", "as": "y2"}],
  "layer": [
    {
      "mark": "bar",
      "encoding": {
        "x": {"bin": true, "field": "IMDB_Rating", "type": "quantitative"},
        "y": {
          "axis": {"orient": "left", "title": "# of movies", "grid": false},
          "aggregate": "count",
          "type": "quantitative"
        }
      }
    },
    {
      "layer": [
        {
          "mark": "line",
          "encoding": {
            "x": {"bin": true, "field": "IMDB_Rating", "type": "quantitative"},
            "y": {
              "field": "Production_Budget",
              "aggregate": "average",
              "type": "quantitative",
              "axis": {
                "orient": "right",
                "format": "s",
                "title": "avg production budget in $"
              }
            }
          }
        },
        {
          "mark": "line",
          "encoding": {
            "x": {"bin": true, "field": "IMDB_Rating", "type": "quantitative"},
            "y": {
              "field": "y2",
              "aggregate": "average",
              "type": "quantitative",
              "axis": {
                "orient": "right",
                "format": "s",
                "title": "avg production budget in $"
              }
            }
          }
        }
      ]
    }
  ],
  "resolve": {"scale": {"y": "independent"}}
}