如何在Vega-Lite的arc图order通道中使用数据原始顺序？

I need to make the order channel in my Vega-Lite arc (pie) chart follow the exact order of entries in my dataset. I know sort: null works for the color channel to keep the legend in the original data order, but using sort: null in the order channel throws an error—it doesn't seem to be supported. Is there a way to enable this, or another method to get the arcs ordered as per the raw data?

My Current Spec #

{
  "$schema": "https://vega.github.io/schema/vega-lite/v6.json",
  "description": "A simple pie chart with embedded data.",
  "data": {
    "values": [
      {"category": 2, "value": 6},
      {"category": 1, "value": 4},
      {"category": 3, "value": 10}
    ]
  },
  "mark": "arc",
  "encoding": {
    "theta": {"field": "value", "type": "quantitative"},
    "color": {
      "field": "category",
      "type": "nominal",
      "sort": null,
      "--comment": "sort: null here makes the legend order use the original order in data.values"
    },
    "order": {
      "field": "category",
      "sort": null,
      "--comment": "sort: null is not allowed in order?"
    }
  }
}

Solution #

Vega-Lite doesn’t support sort: null for the order channel directly, but you can preserve the original data order by using an explicit index field to sort the channel. Here are two approaches:

1. Manually Add an Index Field

Add an index value to each data entry that matches its original position, then sort the order channel by this index:

{
  "$schema": "https://vega.github.io/schema/vega-lite/v6.json",
  "description": "Pie chart preserving original data order with manual index.",
  "data": {
    "values": [
      {"category": 2, "value": 6, "index": 0},
      {"category": 1, "value": 4, "index": 1},
      {"category": 3, "value": 10, "index": 2}
    ]
  },
  "mark": "arc",
  "encoding": {
    "theta": {"field": "value", "type": "quantitative"},
    "color": {
      "field": "category",
      "type": "nominal",
      "sort": null
    },
    "order": {
      "field": "index",
      "sort": "ascending"
    }
  }
}

2. Generate Index Dynamically with a Transform

Use Vega’s window transform to auto-generate an index based on the data’s original order, no manual edits needed:

{
  "$schema": "https://vega.github.io/schema/vega-lite/v6.json",
  "description": "Pie chart preserving original data order with generated index.",
  "data": {
    "values": [
      {"category": 2, "value": 6},
      {"category": 1, "value": 4},
      {"category": 3, "value": 10}
    ]
  },
  "transform": [
    {"window": [{"op": "row_number", "as": "index"}], "frame": [null, 0]}
  ],
  "mark": "arc",
  "encoding": {
    "theta": {"field": "value", "type": "quantitative"},
    "color": {
      "field": "category",
      "type": "nominal",
      "sort": null
    },
    "order": {
      "field": "index",
      "sort": "ascending"
    }
  }
}

Both methods ensure arcs are drawn in the same sequence as your raw dataset, matching the order you see in data.values.

Content sourced from Stack Exchange, question author: lzl124631x