vega-lite 饼图中按大小排序的弧

Question

我正在尝试创建一个饼图，其中弧按大小（顺时针）排序，但不知道如何排序。

似乎“theta”中的“sort”参数指向“color”的默认顺序，例如：

{
  "$schema": "https://vega.github.io/schema/vega-lite/v4.json",
  "description": "A pie chart",
  "data": {
    "values": [
      {"category": "Category 1", "value": 4},
      {"category": "Category 2", "value": 8},
      {"category": "Category 4", "value": 25},
      {"category": "Category 0", "value": 12}
    ]
  },
  "encoding": {
    "color": {"field": "category", "type": "nominal"},
    "theta": {"field": "value", "type": "quantitative", "sort": "descending"}
  },
  "layer": [
    {"mark": {"type": "arc", "outerRadius": 85}}
  ],
  "view": {"stroke": null}
}

这是结果：弧按反向类别名称排序

我可以按“值”对图例（“颜色”）进行排序，但无论我为“theta”的“排序”指定什么，弧都不会按“值”大小排序。

{
  "$schema": "https://vega.github.io/schema/vega-lite/v4.json",
  "description": "A pie chart",
  "data": {
    "values": [
      {"category": "Category 1", "value": 4},
      {"category": "Category 2", "value": 8},
      {"category": "Category 4", "value": 25},
      {"category": "Category 0", "value": 12}
    ]
  },
  "encoding": {
  "color": {"field": "category", "type": "nominal", "sort": {"field" :"value", "order": "ascending"}},
  "theta": {"field": "value", "type": "quantitative", "sort": "descending"}
  },
  "layer": [
    {"mark": {"type": "arc", "outerRadius": 85}}
  ],
  "view": {"stroke": null}
}

这就是结果：图例是有序的，弧线仍然具有相同的顺序

Answer 1

听起来你想要order编码。例如（在编辑器中打开）：

{
  "$schema": "https://vega.github.io/schema/vega-lite/v4.json",
  "description": "A pie chart",
  "data": {
    "values": [
      {"category": "Category 1", "value": 4},
      {"category": "Category 2", "value": 8},
      {"category": "Category 4", "value": 25},
      {"category": "Category 0", "value": 12}
    ]
  },
  "encoding": {
    "color": {"field": "category", "type": "nominal"},
    "theta": {"field": "value", "type": "quantitative", "stack": true},
    "order": {"field": "value", "type": "quantitative", "sort": "descending"}
  },
  "layer": [
    {"mark": {"type": "arc", "outerRadius": 85}}
  ],
  "view": {"stroke": null}
}