如何在Vega中隐藏percent值≤5的文本标记？

要实现当percent值≤5时隐藏文本标记，只需调整文本标记的两处配置即可：

• 将fillOpacity的赋值方式从错误的field改为signal，通过条件表达式控制透明度
• 修正文本内容的字段引用格式

修改后的完整配置如下：

{"$schema": "https://vega.github.io/schema/vega/v5.json","description": "Chart categorizing CDL values for selected location.","width": 294,"height": 200,"padding": 0,"autosize": {"type": "fit-x", "contains": "padding"},"data": [{"name": "categories","values": [{"percent": 3, "color": "#d9d9d9", "name": "other"},{"percent": 7, "color": "#ffe269", "name": "corn"},{"percent": 24, "color": "#e6f5c9", "name": "pasture/hay"},{"percent": 31, "color": "#f4cae4", "name": "developed"},{"percent": 35, "color": "#b3e2cd", "name": "forest"}],"transform": [{"type": "stack", "field": "percent"},{"type": "formula", "as": "annotatedAmount", "expr": "datum.name + ': ' + datum.percent + '%'"}]}],"scales": [{"name": "y","type": "linear","range": "height","nice": true,"zero": true,"domain": {"data": "categories", "field": "y1"}}],"axes": [],"marks": [{"name": "i","type": "rect","from": {"data": "categories"},"encode": {"enter": {"x": {"value": 0},"width": {"value": 294},"y": {"scale": "y", "field": "y0"},"y2": {"scale": "y", "field": "y1"},"fill": {"field": "color"}},"update": {"fillOpacity": {"value": 1}},"hover": {"fillOpacity": {"value": 0.5}}}},{"type": "text","from": {"data": "i"},"encode": {"update": {"y": {"field": "y"},"dy": {"signal": "(datum.y2 - datum.y)/2"},"x": {"signal": "width/2"},"fill": [{"test": "contrast('white', datum.fill) > contrast('black', datum.fill)","value": "white"},{"value": "black"}],"fillOpacity": {"signal": "datum.percent <= 5 ? 0 : 1"},"align": {"value": "center"},"baseline": {"value": "middle"},"text": {"field": "annotatedAmount"}}}}]}

关键修改点说明 #

1. fillOpacity配置：
   原错误写法：

   "fillOpacity": {"field": "datum.percent <= 5 ? 0 : 1 "}
   

   修改为：

   "fillOpacity": {"signal": "datum.percent <= 5 ? 0 : 1"}
   

   原因：field用于直接引用数据字段名，而条件表达式需要用signal来解析执行。

2. 文本内容字段：
   原错误写法：

   "text": {"field": "datum.annotatedAmount"}
   

   修改为：

   "text": {"field": "annotatedAmount"}
   

   原因：field属性直接填写字段名称即可，datum.前缀是在signal表达式中引用字段时使用的。

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