在 vega lite 中应用分箱绘制堆积条形图时面临的问题

Question

我正在尝试使用以下 vega lite 规格绘制应用了分箱的堆叠条形图：

{
  "$schema": "https://vega.github.io/schema/vega-lite/v5.json",
  "height": "container",
  "width": "container",
  "data": {
    "values": [
      {
        "Date": "2024-08-09",
        "country": "India",
        "population": 87,
        "injured": 87
      },
      {
        "Date": "2024-08-09",
        "country": "India",
        "population": 90,
        "injured": 80
      },
      {
        "Date": "2024-08-09",
        "country": "India",
        "population": 100,
        "injured": 77
      },
      {
        "Date": "2024-08-10",
        "country": "India",
        "population": 59,
        "injured": 50
      },
      {
        "Date": "2024-08-09",
        "country": "China",
        "population": 60,
        "injured": 30
      },
      {
        "Date": "2024-08-10",
        "country": "China",
        "population": 44,
        "injured": 40
      },
      {
        "Date": "2024-08-09",
        "country": "USA",
        "population": 78,
        "injured": 45
      },
      {
        "Date": "2024-08-10",
        "country": "USA",
        "population": 33,
        "injured": 20
      },
      {
        "Date": "2024-08-09",
        "country": "France",
        "population": 45,
        "injured": 24
      },
      {
        "Date": "2024-08-10",
        "country": "France",
        "population": 50,
        "injured": 29
      },
      {
        "Date": "2024-08-09",
        "country": "Italy",
        "population": 60,
        "injured": 23
      },
      {
        "Date": "2024-08-10",
        "country": "Italy",
        "population": 95,
        "injured": 87
      },
      {
        "Date": "2024-08-10",
        "country": "Italy",
        "population": 105,
        "injured": 87
      }
    ]
  },
  "transform": [
    {"bin": true, "field": "injured", "as": ["bin_start", "bin_end"]},
    {
      "aggregate": [
        {"op": "sum", "field": "population", "as": "total_population"}
      ],
      "groupby": ["country", "bin_start", "bin_end"]
    }
  ],
  "mark": {"type": "bar", "tooltip": true},
  "encoding": {
    "x": {
      "field": "bin_start",
      "type": "quantitative",
      "axis": {"title": "Injured"}
    },
    "x2": {"field": "bin_end"},
    "y": {"field": "total_population", "type": "quantitative", "stack": true},
    "color": {"field": "country", "type": "nominal"}
  }
}

但是这个 vega lite 规范的输出没有按预期工作，并且我在所有分箱条中都出现垂直间隙，如所附的图像所示。

任何人都可以帮我纠正上述 vega lite 规格吗？ 另请注意，我有意在变换数组中添加了 bin 和aggregate，而不是编码通道，因为我想执行更多变换。

提前非常感谢！

Answer 1

{
  "$schema": "https://vega.github.io/schema/vega-lite/v5.json",
  "height": "container",
  "width": "container",
  "data": {
    "values": [
      {
        "Date": "2024-08-09",
        "country": "India",
        "population": 87,
        "injured": 87
      },
      {
        "Date": "2024-08-09",
        "country": "India",
        "population": 90,
        "injured": 80
      },
      {
        "Date": "2024-08-09",
        "country": "India",
        "population": 100,
        "injured": 77
      },
      {
        "Date": "2024-08-10",
        "country": "India",
        "population": 59,
        "injured": 50
      },
      {
        "Date": "2024-08-09",
        "country": "China",
        "population": 60,
        "injured": 30
      },
      {
        "Date": "2024-08-10",
        "country": "China",
        "population": 44,
        "injured": 40
      },
      {"Date": "2024-08-09", "country": "USA", "population": 78, "injured": 45},
      {"Date": "2024-08-10", "country": "USA", "population": 33, "injured": 20},
      {
        "Date": "2024-08-09",
        "country": "France",
        "population": 45,
        "injured": 24
      },
      {
        "Date": "2024-08-10",
        "country": "France",
        "population": 50,
        "injured": 29
      },
      {
        "Date": "2024-08-09",
        "country": "Italy",
        "population": 60,
        "injured": 23
      },
      {
        "Date": "2024-08-10",
        "country": "Italy",
        "population": 95,
        "injured": 87
      },
      {
        "Date": "2024-08-10",
        "country": "Italy",
        "population": 105,
        "injured": 87
      }
    ]
  },
  "transform": [
    {"bin": true, "field": "injured", "as": ["bin_start", "bin_end"]},
    {
      "aggregate": [
        {"op": "sum", "field": "population", "as": "total_population"}
      ],
      "groupby": ["country", "bin_start", "bin_end"]
    },
     {
      "stack": "total_population",
      "offset": "zero",
      "as": ["v1", "v2"],
      "groupby": ["country", "bin_start"]
    }
  ],
  "mark": {"type": "bar", "tooltip": true},
  "encoding": {
    "x": {
      "field": "bin_start",
      "type": "quantitative",
      "axis": {"title": "Injured"}
    },
    "x2": {"field": "bin_end"},
    "y": {"field": "v1", "type": "quantitative"},
    "y2": {"field": "v2"},
    "color": {"field": "country", "type": "nominal"}
  }
}