如何在Vega-Lite堆叠条形图中过滤数值过小的重叠文本标记

这个问题的核心在于：如果你直接用transform+filter过滤数据，会改变堆叠条形图的底层计算逻辑——过滤后剩余数据的占比会被重新计算，自然导致文本位置偏移。正确的做法是保留完整数据用于堆叠布局计算，仅对文本标记进行条件显示控制。

修改后的完整配置代码 #

{
  "$schema": "https://vega.github.io/schema/vega-lite/v5.json",
  "data": {
    "values": [
      { "value": 0.5026, "serie": "bts", "category": "facebook", "color": "#2ccce4" },
      { "value": 0.357, "serie": "jungkook", "category": "facebook", "color": "#f47373" },
      { "value": 0.0967, "serie": "jimin", "category": "facebook", "color": "#37d67a" },
      { "value": 0.0437, "serie": "butter", "category": "facebook", "color": "#dce775" },
      { "value": 0.7923, "serie": "bts", "category": "news", "color": "#2ccce4" },
      { "value": 0, "serie": "jungkook", "category": "news", "color": "#f47373" },
      { "value": 0.0231, "serie": "jimin", "category": "news", "color": "#37d67a" },
      { "value": 0.1846, "serie": "butter", "category": "news", "color": "#dce775" },
      { "value": 0.6569, "serie": "bts", "category": "twitter", "color": "#2ccce4" },
      { "value": 0.0511, "serie": "jungkook", "category": "twitter", "color": "#f47373" },
      { "value": 0.0949, "serie": "jimin", "category": "twitter", "color": "#37d67a" },
      { "value": 0.1971, "serie": "butter", "category": "twitter", "color": "#dce775" },
      { "value": 1, "serie": "bts", "category": "blog", "color": "#2ccce4" },
      { "value": 0, "serie": "jungkook", "category": "blog", "color": "#f47373" },
      { "value": 0, "serie": "jimin", "category": "blog", "color": "#37d67a" },
      { "value": 0, "serie": "butter", "category": "blog", "color": "#dce775" },
      { "value": 1, "serie": "bts", "category": "instagram", "color": "#2ccce4" },
      { "value": 0, "serie": "jungkook", "category": "instagram", "color": "#f47373" },
      { "value": 0, "serie": "jimin", "category": "instagram", "color": "#37d67a" },
      { "value": 0, "serie": "butter", "category": "instagram", "color": "#dce775" }
    ]
  },
  "title": {},
  "encoding": {
    "y": { "field": "category", "axis": { "title": null } },
    "x": { "aggregate": "sum", "stack": "normalize", "field": "value", "axis": { "title": null, "grid": false } }
  },
  "layer": [
    {
      "mark": { "type": "bar" },
      "encoding": {
        "color": {
          "field": "serie",
          "scale": { "range": ["#2ccce4", "#dce775", "#37d67a", "#f47373"] },
          "legend": null
        },
        "tooltip": [
          { "field": "category", "type": "nominal" },
          { "field": "value", "type": "quantitative", "aggregate": "sum", "format": ".2%" },
          { "field": "serie", "type": "nominal" }
        ]
      }
    },
    {
      "mark": { "type": "text", "dx": -3, "align": "right", "color": "#000", "fontSize": 11 },
      "encoding": {
        "detail": { "field": "serie" },
        "x": { "aggregate": "sum", "stack": "normalize", "field": "value" },
        "text": {
          "condition": {
            "test": "datum.value > 0.05 && datum.value > 0",
            "type": "quantitative",
            "aggregate": "sum",
            "field": "value",
            "format": ".2%"
          },
          "value": ""
        }
      }
    }
  ],
  "config": { "view": { "stroke": "transparent" }, "axis": { "domainWidth": 1 } }
}

关键修改说明 #

• 保留完整堆叠计算：在文本层明确指定x编码的aggregate和stack参数，和条形图保持一致。这样文本的位置计算始终基于原始完整数据的堆叠占比，不会因为隐藏小数值文本而改变布局。
• 精准条件控制文本显示：在text字段的condition中，增加datum.value > 0的判断（避免显示0值的空文本占位），同时保留datum.value > 0.05的过滤逻辑，仅显示占比超过5%的数值文本。
• 避免数据过滤影响布局：全程不使用transform过滤数据，确保条形图和文本标记的堆叠逻辑完全匹配。

这样就能实现过滤小占比文本的同时，让剩余文本的位置完全贴合对应条形的正确位置，不会出现偏移。

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