如何在Vega-Lite条形图中固定高亮首个条形（独立于数据）

当然可以实现，以下是几种可行的方法：

方法1：数据索引+条件编码 #

通过window变换生成排序后的索引，直接判断索引为0的条形并高亮，无论数据如何变化，排序后的首个条目都会被选中：

{
  "mark": "bar",
  "encoding": {
    "x": {"field": "score", "type": "quantitative"},
    "y": {"field": "name", "type": "nominal", "sort": {"field": "score", "order": "descending"}},
    "color": {
      "condition": {"test": "datum.index === 0", "value": "#e63946"},
      "value": "#a8dadc"
    }
  },
  "transform": [
    {"window": [{"op": "row_number", "as": "index"}], "sort": [{"field": "score", "order": "descending"}]},
    {"filter": "datum.index <= 10"}
  ]
}

方法2：参数+首项匹配 #

定义参数自动获取排序后首个学生的标识，再通过条件编码匹配高亮：

{
  "params": [
    {
      "name": "topStudent",
      "value": "",
      "update": "data('source_0')[0].name"
    }
  ],
  "mark": "bar",
  "encoding": {
    "x": {"field": "score", "type": "quantitative"},
    "y": {"field": "name", "type": "nominal", "sort": {"field": "score", "order": "descending"}},
    "color": {
      "condition": {"test": "datum.name === topStudent", "value": "#e63946"},
      "value": "#a8dadc"
    }
  },
  "transform": [
    {"sort": [{"field": "score", "order": "descending"}], "limit": 10}
  ]
}

数据更新时参数会同步刷新，确保高亮始终指向排序后的第一个学生。

方法3：聚合最高分判断 #

通过窗口聚合提取全局最高分，匹配该分数的条形会被高亮（适合需要处理并列最高分的场景）：

{
  "mark": "bar",
  "encoding": {
    "x": {"field": "score", "type": "quantitative"},
    "y": {"field": "name", "type": "nominal", "sort": {"field": "score", "order": "descending"}},
    "color": {
      "condition": {"test": "datum.score === datum.maxScore", "value": "#e63946"},
      "value": "#a8dadc"
    }
  },
  "transform": [
    {"window": [{"op": "max", "field": "score", "as": "maxScore"}]},
    {"sort": [{"field": "score", "order": "descending"}], "limit": 10}
  ]
}

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