Блог

Я пытаюсь отсортировать легенду круговой диаграммы по doc_count (так же, как сортируются срезы), но я не могу найти способ, как это сделать.

Желаемый порядок элементов в легенде таков:

 c
f
e
b
a
d
 

(таким образом, отсортировано по doc_count)

Кто-нибудь может мне помочь, пожалуйста? Спасибо

Онлайн редактор vega

 {
  "$schema": "https://vega.github.io/schema/vega-lite/v4.json",
  "description": "A simple pie chart with embedded data.",
  "width": "600",
  "data": {
    "values": [
      {"key": "a", "doc_count": 4},
      {"key": "b", "doc_count": 6},
      {"key": "c", "doc_count": 20},
      {"key": "d", "doc_count": 3},
      {"key": "e", "doc_count": 7},
      {"key": "f", "doc_count": 8}
    ]
  },
  "transform": [
    {
      "calculate": "{'a': 'Label A', 'b': 'Label B'}[datum.key]",
      "as": "maybeLabel"
    },
    {
      "calculate": "datum.maybeLabel ? datum.maybeLabel   ' ('   datum.key   ')' : datum.key",
      "as": "label"
    },
    {
      "window": [{"op": "sum", "field": "doc_count", "as": "totalValue"}],
      "frame": [null, null]
    },
    {
      "calculate": "(round(datum.doc_count/datum.totalValue * 100 * 100) / 100)   ' %'",
      "as": "percents"
    }
  ],
  "layer": [
    {
      "mark": {"type": "arc", "outerRadius": 200},
      "encoding": {
        "color": {
          "field": "label",
          "type": "nominal",
          "legend": {"labelFontSize": 14},
          "sort": {"field": "doc_count"} // <- this does not work
        }
      }
    },
    {
      "mark": {
        "type": "text",
        "fontSize": 15,
        "fontWeight": "bold",
        "radius": 240
      },
      "encoding": {
        "text": {"field": "label", "type": "nominal"},
        "color": {"field": "label", "type": "nominal"}
      }
    },
    {
      "mark": {"type": "text", "radius": 150, "fontSize": 13},
      "encoding": {
        "text": {"field": "percents", "type": "nominal"},
        "color": {"value": "white"}
      }
    }
  ],
  "encoding": {
    "theta": {"field": "doc_count", "type": "quantitative", "stack": true},
    "order": {
      "field": "doc_count",
      "type": "quantitative",
      "sort": "descending"
    },
    "tooltip": [
      {"field": "label", "type": "nominal"},
      {"field": "doc_count", "type": "quantitative"},
      {"field": "percents", "type": "nominal"}
    ]
  },
  "view": {"stroke": null}
}
 

Ваши изменения были почти правильными, вы просто пропустили добавление порядка сортировки по цвету. Также повторите сортировку и в других слоях, что позволит решить проблему сортировки для вас. Ниже приведен фрагмент и редактор:

 {
  "$schema": "https://vega.github.io/schema/vega-lite/v4.json",
  "description": "A simple pie chart with embedded data.",
  "width": "600",
  "data": {
    "values": [
      {"key": "a", "doc_count": 4},
      {"key": "b", "doc_count": 6},
      {"key": "c", "doc_count": 20},
      {"key": "d", "doc_count": 3},
      {"key": "e", "doc_count": 7},
      {"key": "f", "doc_count": 8}
    ]
  },
  "transform": [
    {
      "calculate": "{'a': 'Label A', 'b': 'Label B'}[datum.key]",
      "as": "maybeLabel"
    },
    {
      "calculate": "datum.maybeLabel ? datum.maybeLabel   ' ('   datum.key   ')' : datum.key",
      "as": "label"
    },
    {
      "window": [{"op": "sum", "field": "doc_count", "as": "totalValue"}],
      "frame": [null, null]
    },
    {
      "calculate": "(round(datum.doc_count/datum.totalValue * 100 * 100) / 100)   ' %'",
      "as": "percents"
    }
  ],
  "layer": [
    {
      "mark": {"type": "arc", "outerRadius": 200},
      "encoding": {
        "color": {
          "field": "label",
          "type": "nominal",
          "legend": {"labelFontSize": 14},
          "sort": {"field": "doc_count", "order": "descending"}
        }
      }
    },
    {
      "mark": {
        "type": "text",
        "fontSize": 15,
        "fontWeight": "bold",
        "radius": 240
      },
      "encoding": {
        "text": {"field": "label", "type": "nominal"},
        "color": {
          "field": "label",
          "type": "nominal",
          "sort": {"field": "doc_count", "order": "descending"}
        }
      }
    },
    {
      "mark": {"type": "text", "color": "white", "radius": 150, "fontSize": 13},
      "encoding": {"text": {"field": "percents", "type": "nominal"}}
    }
  ],
  "encoding": {
    "theta": {"field": "doc_count", "type": "quantitative", "stack": true},
    "order": {
      "field": "doc_count",
      "type": "quantitative",
      "sort": "descending"
    },
    "tooltip": [
      {"field": "label", "type": "nominal"},
      {"field": "doc_count", "type": "quantitative"},
      {"field": "percents", "type": "nominal"}
    ]
  },
  "view": {"stroke": null}
}