堆叠条形图文本条件透明度：按占比隐藏标签并显示实际值

问题解决：堆叠条形图按占比隐藏实际值标签 #

问题原因

你当前的文本层transform是基于原始数据添加聚合字段，但编码中又对x做了sum聚合，导致opacity判断用的是单条原始数据的占比，而非聚合后堆叠段的真实占比。当文本内容换成cat_total时，这个逻辑矛盾显现，导致所有标签都显示。

解决方案

先将数据聚合到yval+category级别，确保每个堆叠段对应一条数据，再计算真实占比，让opacity判断基于正确的相对占比。

修改后的完整代码

{
  "data": {"name": "dataset"},
  "encoding": {
    "y": {
      "title": null,
      "field": "yval",
      "sort": "descending"
    }
  },
  "layer": [
    {
      "mark": {
        "type": "bar",
        "tooltip": true
      },
      "encoding": {
        "x": {
          "title": null,
          "field": "xval",
          "type": "quantitative",
          "aggregate": "sum"
        },
        "color": {"field": "category"},
        "order": {"field": "category"}
      }
    },
    {
      "transform": [
        // 1. 按yval+category聚合，得到每个堆叠段的实际总和
        {
          "aggregate": [
            {"op": "sum", "field": "xval", "as": "cat_total"}
          ],
          "groupby": ["yval", "category"]
        },
        // 2. 按yval聚合，计算对应条形的总宽度
        {
          "joinaggregate": [
            {"op": "sum", "field": "cat_total", "as": "xtotal"}
          ],
          "groupby": ["yval"]
        },
        // 3. 计算当前堆叠段的相对占比
        {
          "calculate": "datum.cat_total / datum.xtotal",
          "as": "cat_perc"
        }
      ],
      "mark": {"type": "text"},
      "encoding": {
        "x": {
          "field": "cat_total",
          "type": "quantitative",
          "stack": "zero",
          "bandPosition": 0.5
        },
        "text": {"field": "cat_total"},
        "color": {"value": "black"},
        "opacity": {
          "condition": {
            "test": "datum.cat_perc < 0.1",
            "value": 0
          },
          "value": 1
        },
        "order": {"field": "category"}
      }
    }
  ]
}

关键修改说明

1. 聚合前置：先通过aggregate将原始数据合并到yval+category维度，确保每个堆叠段对应一条数据，cat_total是该段的真实总和
2. 占比计算准确：用joinaggregate计算每个yval对应的条形总宽度，保证占比是基于当前条形的实际总宽度
3. 编码简化：文本层的x直接使用聚合后的cat_total，无需重复聚合，确保文本位置和堆叠段完全匹配
4. 逻辑一致性：opacity判断始终基于聚合后的真实占比，无论显示百分比还是实际值，都能正确隐藏占比不足10%的标签，且支持筛选后自动重新计算

测试验证（基于你的数据集）

• top条形：a段占比≈7.1%（隐藏），b段≈35.7%（显示），c段≈57.1%（显示）
• bottom条形：a段≈23%（显示），b段≈7.7%（隐藏），c段≈69.2%（显示）

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