Vega-Lite分组条形图添加fdr值嵌套轴标签的实现问询

解决这个问题的核心是用Vega-Lite的分层（Layer）语法，把条形图和文本标签拆成两个独立图层分别控制位置，绕过yOffset不支持独立轴的限制。

具体实现方案 #

1. 保留原有的分组条形图层，用xOffset区分同一sample下不同fdr的条形。
2. 新增文本图层，复用相同的x（sample）和xOffset（fdr分组）配置，让标签和对应条形水平对齐；垂直方向基于count值加固定偏移，把标签放在条形上方（或内部）。

示例配置代码 #

假设你原有条形图配置如下：

{
  "data": {"values": [/* 你的数据：count、sample、fdr */]},
  "mark": "bar",
  "encoding": {
    "x": {"field": "sample", "type": "nominal"},
    "xOffset": {"field": "fdr", "type": "nominal"},
    "y": {"field": "count", "type": "quantitative"},
    "color": {"field": "fdr", "type": "nominal"}
  }
}

修改为分层结构后的完整配置：

{
  "data": {"values": [/* 你的数据 */]},
  "layer": [
    // 分组条形图层
    {
      "mark": "bar",
      "encoding": {
        "x": {"field": "sample", "type": "nominal"},
        "xOffset": {"field": "fdr", "type": "nominal"},
        "y": {"field": "count", "type": "quantitative"},
        "color": {"field": "fdr", "type": "nominal"}
      }
    },
    // fdr标签文本层
    {
      "mark": {
        "type": "text",
        "align": "center",
        "baseline": "bottom",
        "dy": -5, // 标签与条形顶部的间距
        "fontSize": 10
      },
      "encoding": {
        "x": {"field": "sample", "type": "nominal"},
        "xOffset": {"field": "fdr", "type": "nominal"},
        "y": {"field": "count", "type": "quantitative"},
        "text": {"field": "fdr", "type": "nominal"},
        "color": {"value": "#333"} // 标签颜色可按需调整
      }
    }
  ]
}

细节调整说明 #

• 若要把标签放在条形内部，可将文本标记的baseline设为"middle"，dy改为0。
• 如果fdr是数值类型，可在text编码中加"format": ".2f"控制小数位数。

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