Vega规范中无法根据条件设置文本颜色的问题求助

问题出在Vega标记的编码分组逻辑上：你将颜色的条件判断放在了enter块中，而enter仅负责元素的初始属性设置，不会根据数据条件动态更新样式。

修改后的完整Vega规范 #

{
  "$schema": "https://vega.github.io/schema/vega/v5.json",
  "description": "某科技公司月度股价",
  "background": "white",
  "padding": 5,
  "width": 400,
  "height": 200,
  "data": [
    {
      "name": "source_0",
      "values": [
        {"date": "2021-01-01", "symbol": "AAPL", "price": 150, "budget": 110},
        {"date": "2021-02-01", "symbol": "AAPL", "price": 100, "budget": 50},
        {"date": "2022-03-01", "symbol": "AAPL", "price": 90, "budget": 90},
        {"date": "2022-04-01", "symbol": "AAPL", "price": 130, "budget": 150}
      ],
      "transform": [
        {
          "type": "filter",
          "expr": "datum.symbol === 'AAPL'"
        },
        {
          "type": "formula",
          "expr": "slice(datum.date, 0, 7)",
          "as": "year_month"
        },
        {
          "type": "formula",
            "expr": "(datum.price>=datum.budget) ? 1 : 0",
            "as":"isgreen"
        }
      ]
    }
  ],
  "scales": [
    {
      "name": "x",
      "type": "band",
      "domain": {"data": "source_0", "field": "year_month"},
      "range": "width",
      "padding": 0.1
    },
    {
      "name": "y",
      "type": "linear",
      "domain": [0, 200],
      "range": [200, 0],
      "nice": true
    }
  ],
  "axes": [
    {
      "scale": "x",
      "orient": "bottom",
      "title": "月份"
    },
    {
      "scale": "y",
      "orient": "left",
      "title": "股价（美元）"
    }
  ],
  "marks": [
    {
      "type": "text",
      "from": {"data": "source_0"},
      "encode": {
        "enter": {
          "x": {"scale": "x", "field": "year_month", "band": 0.5},
          "y": {"scale": "y", "field": "budget"},
          "text": {"field":"budget"},
          "align": {"value": "center"},
          "baseline": {"value": "middle"},
          "fill": {"value": "blue"}
        },
        "update": {
          "fill": {
            "condition": {
              "test": "datum.isgreen === 1",
              "value": "green"
            },
            "value": "blue"
          }
        }
      }
    }
  ]
}

关键修改说明 #

• 将颜色的条件判断从enter块移至update块，确保每次数据渲染时都会重新计算条件并应用对应颜色。
• 也可以直接省略isgreen字段的计算，直接在条件中使用原始数据判断，简化后的update块如下：

"update": {
  "fill": {
    "condition": {
      "test": "datum.price >= datum.budget",
      "value": "green"
    },
    "value": "blue"
  }
}

修改后，文本颜色会根据price与budget的大小关系动态切换，满足需求。

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