如何在 vega lite 的堆栈条形图中过滤具有重叠的小值的文本标记

Question

部分文字重叠，因为数值很小，所以文字标记不够space。我试过使用带过滤器的转换，但文本标记的位置不正确。我该怎么做才能过滤掉小于5%的值，同时保持剩余文本标记的位置？

{
  "$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"
        },
        "text": {
          "condition": {
            "test": "datum.value > 0.05",
            "type": "quantitative",
            "aggregate": "sum",
            "field": "value",
            "format": ".2%"
          },
          "value": ""
        }
      }
    }
  ],
  "config": {
    "view": {
      "stroke": "transparent"
    },
    "axis": {
      "domainWidth": 1
    }
  }
}

Answer 1

您可以使用条件来显示或隐藏文本标记。您没有为您的示例提供完整的数据集，因此请参阅下文了解如何使用其中一个标准示例进行实施。小于 55 的标签被条件隐藏。

Editor

{
  "data": {"url": "data/barley.json"},
  "width": 400,
  "encoding": {
    "x": {
      "type": "quantitative",
      "aggregate": "sum",
      "field": "yield",
      "stack": "zero"
    },
    "y": {"type": "nominal", "field": "variety"}
  },
  "layer": [
    {
      "mark": "bar",
      "encoding": {"color": {"type": "nominal", "field": "site"}}
    },
    {
      "mark": {"type": "text", "color": "white", "dx": -5, "align": "right"},
      "encoding": {
        "detail": {"type": "nominal", "field": "site"},
        "text": {
          "condition": {
            "test": "datum.sum_yield > 55",
            "type": "quantitative",
            "aggregate": "sum",
            "field": "yield",
            "format": ".1f"
          },
          "value": ""
        }
      }
    }
  ]
}

如何在 vega lite 的堆栈条形图中过滤具有重叠的小值的文本标记

How to filter text mark with small values that are overlapping in stack bar chart on vega lite

vega-lite

vega