如何在Vega主图表下方添加自定义分段水平堆叠条形图？

现有图表与需求 #

现有图表：

需在主图表下方添加自定义分段条形图，例：regimen1分为-10到5的蓝色段、5到20的红色段，效果参考：

当前存在问题 #

已添加下方条形图，但遇到以下问题：

• 无法对同一x字段实现水平堆叠分段条形
• 无法为不同x字段添加新的条形
• 无法与上方图表x轴保持比例一致

当前Vega代码 #

{
  "config": {"view": {"stroke": null}},
  "$schema": "https://vega.github.io/schema/vega-lite/v5.json",
  "description": "Two vertically concatenated charts that show a histogram of precipitation in Seattle and the relationship between min and max temperature.",
  
  "vconcat": [
    {
      "data": {
      "url": "data/weather.csv"},
      "transform": [{
        "filter": "datum.location === 'Seattle'"
        }],
      "mark": "point",
      "encoding": {
        "x": {
          "field": "temp_min",
          "type": "quantitative",
          "bin": true
        },
        "y": {
          "field": "temp_max",
          "type": "quantitative",
          "bin": true
        },
        "size": {
          "aggregate": "count",
          "type": "quantitative"
        }
      }
    },
    {
      "data": {
        "name": "table2",
        "values": [
          {"x": "regimen1", "y": 15},
          {"x": "regimen2", "y": 30}]},
      "mark": "bar",
      "encoding": {
        "x": {
          "field": "x",
          "type": "nominal",
          "title": null,
          "axis": {"domain": false, "grid": false, "ticks": false, "labels": false}
        },
        "y": {
          "field": "x",
          "type": "ordinal",
          "title": null,
          "axis": {"domain": false, "grid": false, "ticks": false}
        }
      }
    }
    
  ]
}

问题解决与代码修正 #

核心思路 #

1. 调整数据结构：为每个分段定义起止值、所属分类和颜色
2. 使用x+x2实现水平分段条形
3. 配置共享x轴比例尺，保证上下图表比例一致

修正后完整代码 #

{
  "config": {"view": {"stroke": null}},
  "$schema": "https://vega.github.io/schema/vega-lite/v5.json",
  "description": "主图表+自定义分段条形图",
  "resolve": {"scale": {"x": "shared"}},
  "vconcat": [
    {
      "data": {"url": "data/weather.csv"},
      "transform": [{"filter": "datum.location === 'Seattle'"}],
      "mark": "point",
      "encoding": {
        "x": {
          "field": "temp_min",
          "type": "quantitative",
          "bin": true,
          "scale": {"domain": [-10, 30]}
        },
        "y": {
          "field": "temp_max",
          "type": "quantitative",
          "bin": true
        },
        "size": {"aggregate": "count", "type": "quantitative"}
      }
    },
    {
      "data": {
        "name": "table2",
        "values": [
          {"regimen": "regimen1", "x_start": -10, "x_end": 5, "color": "blue"},
          {"regimen": "regimen1", "x_start": 5, "x_end": 20, "color": "red"},
          {"regimen": "regimen2", "x_start": 0, "x_end": 10, "color": "green"},
          {"regimen": "regimen2", "x_start": 10, "x_end": 30, "color": "orange"}
        ]
      },
      "mark": "bar",
      "encoding": {
        "y": {
          "field": "regimen",
          "type": "ordinal",
          "title": null,
          "axis": {"domain": false, "grid": false, "ticks": true}
        },
        "x": {"field": "x_start", "type": "quantitative", "title": null},
        "x2": {"field": "x_end"},
        "color": {"field": "color", "scale": null}
      }
    }
  ]
}

关键说明 #

• resolve: {"scale": {"x": "shared"}}：强制上下图表共享x轴比例尺，保证比例完全一致
• 下方条形图用x和x2定义分段起止，实现水平分段效果
• color字段通过scale: null直接使用数据中的颜色值，确保指定颜色生效
• 新增不同分类的条形只需在table2的values中添加对应分段数据即可

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