Question

我正在制作一个既有条形又有规则线的分层图表。我遇到的问题是，在x轴上，刻度线和刻度线标签仅显示在条形图下，并且不覆盖整个轴，因此，在规则线所在的位置没有刻度线和标签线位于。这是我所见的示例（link to Vega editor）：

{
  "$schema": "https://vega.github.io/schema/vega-lite/v4.json",
  "data": {"url": "data/movies.json"},
  "transform": [
  {"calculate": "2*datum.IMDB_Rating", "as": "UpperLimit"}
  ],
  "layer": [
    {
      "mark": "bar",
      "encoding": {
        "x": {"bin": true, "field": "IMDB_Rating", "type": "quantitative"},
        "y": {"aggregate": "count", "type": "quantitative"}
      }
    },
    {
      "mark": "rule",
      "encoding": {
        "x": {
          "aggregate": "max",
          "field": "UpperLimit",
          "type": "quantitative"
        },
        "color": {"value": "red"},
        "size": {"value": 5}
      }
    }
  ]
}

Image of issue

如何使刻度线和标签横跨整个轴？预先感谢您的帮助！

Answer 1

在编码中使用bin变换时，Vega-Lite会调整默认轴属性以匹配binning。您可以通过编码的scale和axis属性来手动重新调整它们，但是我认为一种更简单的方法是将bin转换移至图表的transform规范。这是一个示例（Vega Editor）：

{
  "$schema": "https://vega.github.io/schema/vega-lite/v4.json",
  "data": {"url": "data/movies.json"},
  "transform": [
    {"calculate": "2*datum.IMDB_Rating", "as": "UpperLimit"},
    {
      "bin": true,
      "field": "IMDB_Rating",
      "as": ["IMDB_Rating_0", "IMDB_Rating_1"]
    }
  ],
  "layer": [
    {
      "mark": "bar",
      "encoding": {
        "x": {
          "field": "IMDB_Rating_0",
          "type": "quantitative",
          "bin": "binned"
        },
        "x2": {"field": "IMDB_Rating_1"},
        "y": {"aggregate": "count", "type": "quantitative"}
      }
    },
    {
      "mark": "rule",
      "encoding": {
        "x": {
          "aggregate": "max",
          "field": "UpperLimit",
          "type": "quantitative"
        },
        "color": {"value": "red"},
        "size": {"value": 5}
      }
    }
  ]
}

Vega-Lite分层图表：如何获取刻度线和刻度线标签以跨越整个轴？

1 个答案: