如何将基于datum的条件绑定到Vega-Lite滑块并关联百分比文本测试？

现有如下Vega-Lite图表，希望将百分比文本的条件测试与slider（滑块）关联，同时想了解是否可以将使用datum的条件绑定到滑块，请问是否有实现方法？

原图表代码：

{
  "$schema": "https://vega.github.io/schema/vega-lite/v5.json",
  "data": {
    "name": "data",
    "values": [
      {
        "avg_score": "4.2000000000000000",
        "call_count": 15,
        "label": "Negative Words",
        "max_score": 10,
        "percentage": "0.42000000000000000000"
      },
      {
        "avg_score": "2.3333333333333333",
        "call_count": 15,
        "label": "Answer Time",
        "max_score": 5,
        "percentage": "0.46666666666666666000"
      }
    ]
  },
  "params": [
    {
      "name": "percent",
      "value": 80,
      "bind": {"input": "range", "min": 1, "max": 100}
    },
    {"name": "gt", "expr": ""}
  ],
  "description": "",
  "encoding": {
    "y": {
      "axis": {
        "labels": true,
        "tickBand": "center",
        "tickOpacity": 0,
        "title": ""
      },
      "field": "label",
      "type": "nominal"
    }
  },
  "height": {"step": 16},
  "layer": [
    {
      "encoding": {
        "tooltip": [
          {"field": "call_count", "title": "calls", "type": "quantitative"},
          {"field": "avg_score", "title": "avg score", "type": "quantitative"}
        ],
        "x": {
          "aggregate": "sum",
          "axis": null,
          "field": "percentage",
          "scale": {"domain": [0, 1]},
          "title": "Scores"
        }
      },
      "mark": {"color": "#ddd", "tooltip": true, "type": "bar"}
    },
    {
      "encoding": {
        "color": {
          "condition": {"test": "datum['percentage'] < 80", "value": "red"},
          "value": "green"
        },
        "text": {"field": "percentage", "format": ".2%"}
      },
      "mark": {"align": "left", "type": "text", "x": 5}
    },
    {
      "encoding": {"text": {"field": "max_score", "type": "quantitative"}},
      "mark": {
        "align": "left",
        "baseline": "middle",
        "dx": 24,
        "fontWeight": "bold",
        "tooltip": "the maximum for the score",
        "type": "text"
      }
    }
  ],
  "title": "Scores",
  "width": 200
}

完全可以实现，核心是将条件判断中的固定数值替换为滑块参数的引用，同时注意数值单位匹配（滑块值是0-100的百分比，而数据中的percentage是0-1的小数）。

修改后的完整代码：

{
  "$schema": "https://vega.github.io/schema/vega-lite/v5.json",
  "data": {
    "name": "data",
    "values": [
      {
        "avg_score": "4.2000000000000000",
        "call_count": 15,
        "label": "Negative Words",
        "max_score": 10,
        "percentage": "0.42000000000000000000"
      },
      {
        "avg_score": "2.3333333333333333",
        "call_count": 15,
        "label": "Answer Time",
        "max_score": 5,
        "percentage": "0.46666666666666666000"
      }
    ]
  },
  "params": [
    {
      "name": "percent",
      "value": 80,
      "bind": {
        "input": "range",
        "min": 1,
        "max": 100,
        "label": "阈值百分比："
      }
    }
  ],
  "encoding": {
    "y": {
      "axis": {
        "labels": true,
        "tickBand": "center",
        "tickOpacity": 0,
        "title": ""
      },
      "field": "label",
      "type": "nominal"
    }
  },
  "height": {"step": 16},
  "layer": [
    {
      "encoding": {
        "tooltip": [
          {"field": "call_count", "title": "calls", "type": "quantitative"},
          {"field": "avg_score", "title": "avg score", "type": "quantitative"}
        ],
        "x": {
          "aggregate": "sum",
          "axis": null,
          "field": "percentage",
          "scale": {"domain": [0, 1]},
          "title": "Scores"
        }
      },
      "mark": {"color": "#ddd", "tooltip": true, "type": "bar"}
    },
    {
      "encoding": {
        "color": {
          "condition": {"test": "datum.percentage < percent / 100", "value": "red"},
          "value": "green"
        },
        "text": {"field": "percentage", "format": ".2%"}
      },
      "mark": {"align": "left", "type": "text", "x": 5}
    },
    {
      "encoding": {"text": {"field": "max_score", "type": "quantitative"}},
      "mark": {
        "align": "left",
        "baseline": "middle",
        "dx": 24,
        "fontWeight": "bold",
        "tooltip": "the maximum for the score",
        "type": "text"
      }
    }
  ],
  "title": "Scores",
  "width": 200
}

关键修改点： #

1. 移除了无用的gt参数
2. 给滑块添加了label属性，提升用户体验
3. 将颜色条件中的固定值80替换为percent / 100——因为滑块输出的是0-100的百分比数值，而数据中的percentage是0-1的小数，需要做单位转换才能正确比较
4. 简化了datum['percentage']为datum.percentage，语法更简洁

原理说明： #

Vega-Lite的参数可以直接在表达式中通过参数名引用，只要保证比较双方的数值单位一致，就能实现条件判断与滑块的实时绑定。拖动滑块时，条件判断会自动更新，文本颜色也会随之变化。

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