如何自定义Vega颜色图例中标签的显示顺序？

要让图例按自定义顺序（比如B在前、A在后）展示，核心是给color编码的尺度（scale）指定domain属性，明确分组的排列顺序。具体操作如下：

1. 针对你的需求（B在A前）的修改方案 #

在encoding.color中添加scale配置，设置domain为["B", "A"]，Vega-Lite会严格按照这个顺序渲染图例和对应的数据系列。修改后的完整代码如下：

{
  "data": {
    "values": [
      {"x":"1", "group": "B", "value":0.2},
      {"x":"2", "group": "B", "value":0.4},
      {"x":"3", "group": "B", "value":0.3},
      {"x":"1", "group": "A", "value":0.1},
      {"x":"2", "group": "A", "value":0},
      {"x":"3", "group": "A", "value":0.2}
    ]
  },
  "mark": "line",
  "encoding": {
    "x": {"field": "x"},
    "y": {"field": "value", "type": "quantitative"},
    "color": {
      "field": "group",
      "scale": {"domain": ["B", "A"]}  // 指定自定义顺序
    }
  }
}

2. 通用自定义排序方法 #

如果需要更复杂的任意顺序（比如多分组如C、A、B），只需调整domain数组的元素顺序即可。例如：

"color": {
  "field": "group",
  "scale": {"domain": ["C", "A", "B"]}
}

该方法适用于所有基于分类字段的图例排序，包括color、shape、size等编码通道的图例。

内容的提问来源于stack exchange，提问作者Olivier Melançon