如何按值排序分类内的组及调整分类显示顺序？（附示例代码）

需求实现步骤 #

1. 自定义category的整体显示顺序
   在x轴的编码配置中添加sort属性，直接指定目标顺序数组["B", "A", "C"]，即可强制category按该顺序展示。

2. 按value降序排列每个category下的group
   通过transform中的window函数，为每个category分组内的group计算基于value降序的排序位次，再让控制同category内分组横向偏移顺序的xOffset按照该位次排列，确保每组内group按value从高到低展示。

完整配置代码 #

{
  "data": {
    "values": [
      {"category":"A", "group": "x", "value":0.1},
      {"category":"A", "group": "y", "value":0.6},
      {"category":"A", "group": "z", "value":0.9},
      {"category":"B", "group": "x", "value":0.7},
      {"category":"B", "group": "y", "value":0.2},
      {"category":"B", "group": "z", "value":1.1},
      {"category":"C", "group": "x", "value":0.6},
      {"category":"C", "group": "y", "value":0.1},
      {"category":"C", "group": "z", "value":0.2}
    ]
  },
  "transform": [
    {
      "window": [{"op": "rank", "as": "group_rank"}],
      "partitionby": ["category"],
      "sort": [{"field": "value", "order": "descending"}]
    }
  ],
  "mark": "bar",
  "encoding": {
    "x": {"field": "category", "sort": ["B", "A", "C"]},
    "y": {"field": "value", "type": "quantitative"},
    "xOffset": {"field": "group", "sort": {"field": "group_rank"}},
    "color": {"field": "group"}
  }
}

代码说明 #

• transform区块：通过partitionby: ["category"]按分类分组，sort: [{"field": "value", "order": "descending"}]指定每组内按value降序排序，用rank操作生成group_rank字段，该字段代表每个group在所属category内的排序位次。
• x轴的sort: ["B", "A", "C"]直接定义了category的全局展示顺序。
• xOffset的sort: {"field": "group_rank"}让同category内的group按照计算出的位次排列，实现每组内按value降序的需求。

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