如何在Vega-Lite的水平堆叠条形图中为聚合区块添加边框线？

要给水平堆叠条形图的每个聚合段添加区分起止点的描边边界框，以下是两种实用实现方式：

方法1：直接为条形标记添加描边 #

这种方式最简单，直接在bar标记中配置描边属性，每个堆叠的条形段会自动带上边界线：

{
  "data": {"url": "data/population.json"},
  "transform": [
    {"filter": "datum.year == 2000"},
    {"calculate": "datum.sex == 2 ? 'Female' : 'Male'", "as": "gender"}
  ],
  "mark": {"type": "bar", "stroke": "#000", "strokeWidth": 1},
  "encoding": {
    "y": {"field": "age", "type": "ordinal"},
    "x": {"aggregate": "sum", "field": "people", "type": "quantitative"},
    "color": {"field": "gender", "type": "nominal"}
  }
}

• stroke设置描边颜色，strokeWidth控制线条粗细，可根据需求调整。
• 每个堆叠段的描边会自然区分开相邻聚合总和的起止位置。

方法2：叠加规则标记精准绘制边界 #

如果需要更精细的控制（比如只显示左右边界），可以通过叠加rule标记层，结合窗口变换计算累计值来定位边界：

{
  "data": {"url": "data/population.json"},
  "transform": [
    {"filter": "datum.year == 2000"},
    {"calculate": "datum.sex == 2 ? 'Female' : 'Male'", "as": "gender"},
    {"window": [{"op": "sum", "field": "people", "as": "cumulative", "sort": [{"field": "gender"}]}], "groupby": ["age"]}
  ],
  "layer": [
    {
      "mark": "bar",
      "encoding": {
        "y": {"field": "age", "type": "ordinal"},
        "x": {"field": "cumulative", "type": "quantitative"},
        "color": {"field": "gender", "type": "nominal"}
      }
    },
    {
      "mark": {"type": "rule", "stroke": "#000", "strokeWidth": 2},
      "encoding": {
        "y": {"field": "age", "type": "ordinal", "bandPosition": 0.5},
        "x": {"field": "cumulative", "type": "quantitative"}
      }
    },
    {
      "mark": {"type": "rule", "stroke": "#000", "strokeWidth": 2},
      "encoding": {
        "y": {"field": "age", "type": "ordinal", "bandPosition": 0.5},
        "x": {"field": "cumulative", "type": "quantitative", "aggregate": "min"}
      }
    }
  ]
}

• 窗口变换window用于计算每个分组内的累计值，确定每个聚合段的结束位置。
• 两个rule层分别绘制每个聚合段的起始和结束边界，bandPosition: 0.5确保线条对齐条形的垂直中心。

内容的提问来源于stack exchange，提问作者Mohit