基于另一个字段值的条件渲染标签颜色

Question

我正在尝试使用测试谓词或字段谓词基于另一个字段值呈现标签颜色，但我无法正确处理。 我想要的是，当弹性值等于 0 时，y 轴（截面）上的标签颜色可以从黑色变为红色。
我已经在在线编辑器上编写了代码，如果您能给我一些帮助，我真的很感激。

vega-lite-condition-render-label-color

在上述情况下，第五个 应该是红色而不是黑色。

Answer 1

我添加了另一个带有文本的图层，其中显示了您的text of section 字段。因为带有条件的颜色配置将正常工作。下面是代码和editor：

{
  "$schema": "https://vega.github.io/schema/vega-lite/v5.json",
  "usermeta": {"embedOptions": {"renderer": "svg"}},
  "data": {
    "values": [
      {
        "section": "1. General Health & Safety",
        "Index": 38.40277777777778,
        "resilience": 31
      },
      {
        "section": "10. Environmental Accidents",
        "Index": 38.40277777777778,
        "resilience": 19
      },
      {
        "section": "2. Health - Process",
        "Index": 38.40277777777778,
        "resilience": 39
      },
      {
        "section": "3. Health - People",
        "Index": 38.40277777777778,
        "resilience": 47
      },
      {
        "section": "4. Hygiene & Cleaning",
        "Index": 38.40277777777778,
        "resilience": 0
      },
      {
        "section": "5. Health Care & Working Conditions",
        "Index": 38.40277777777778,
        "resilience": 25
      },
      {
        "section": "6. External Pollution & Extreme Weather Conditions",
        "Index": 38.40277777777778,
        "resilience": 16
      },
      {
        "section": "7. Hazardous Materials/Substances",
        "Index": 38.40277777777778,
        "resilience": 25
      },
      {
        "section": "8. Safety Accidents",
        "Index": 38.40277777777778,
        "resilience": 46
      },
      {
        "section": "9. Subcontractors Training",
        "Index": 38.40277777777778,
        "resilience": "1"
      }
    ]
  },
  "config": {"view": {"stroke": null}},
  "height": 300,
  "autosize": {"resize": true},
  "layer": [
    {
      "mark": {"type": "bar", "cornerRadiusEnd": 2},
      "encoding": {
        "x": {
          "field": "resilience",
          "type": "quantitative",
          "title": null,
          "axis": {"grid": true},
          "scale": {"domain": [0, 100]}
        },
        "y": {
          "field": "section",
          "type": "ordinal",
          "axis": {
            "grid": false,
            "domain": false,
            "ticks": false,
            "labels": false,
            "labelAlign": "left",
            "labelBaseline": "middle",
            "labelPadding": -5,
            "labelOffset": 0,
            "labelColor2": {"expr": "datum.resilience < 230 ? 'red' : 'green'"},
            "labelColor": {
              "condition": {"test": "datum.resilience > 5", "value": "red"},
              "value": "green"
            },
            "title": null
          }
        },
        "tooltip": {
          "field": "resilience",
          "type": "quantitative",
          "format": ".0f"
        },
        "color": {
          "field": "resilience",
          "type": "quantitative",
          "title": "Score",
          "scale": {
            "domain": [0, 30, 50, 55, 60, 65, 70, 75, 80, 90, 100],
            "range": [
              "#DE7363",
              "#FB9F38",
              "#F9B821",
              "#FBE8C9",
              "#F5DA01",
              "#E2D91E",
              "#CBD641",
              "#B6D35F",
              "#A2D180",
              "#7CC895",
              "#52BEA9"
            ]
          }
        }
      }
    },
    {
      "mark": {"type": "text", "align": "left"},
      "encoding": {
        "text": {"field": "section"},
        "color": {
          "condition": {"test": "datum.resilience < 2", "value": "red"},
          "value": "green"
        },
        "x": {"datum": 0},
        "y": {"field": "section", "type": "ordinal"}
      }
    },
    {
      "mark": {"type": "rule", "color": "red", "size": 3},
      "encoding": {
        "x": {
          "aggregate": "max",
          "field": "Index",
          "type": "quantitative",
          "axis": null,
          "format": ".0f",
          "title": "Module Resilience"
        }
      }
    }
  ]
}