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

Question

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

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

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

我知道"resolve"选项as documented here，但在阅读了这个How do I add a secondary Y axis to my vega-lite chart?和其他一堆问题后，我找不到我的特定用例。

到目前为止，我徒劳的尝试是这样的：example in online editor example screenshot

{
  "$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选项：

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

}

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

}

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

}

但它们都不起作用。

Answer 1

您可以通过在层中创建一个层来实现此目的:在具有共享轴的单个层中的两个orient: "right"图表，以及具有独立比例的orient: "left"图表：

vega editor link

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

​

​