对条形图的堆栈段进行排序

Question

我玩过堆叠条形图，想用 Vega Lite 创建西班牙国旗。我在数据中指定了条纹的高度和颜色，但无法对单个堆栈进行排序：

我将比例设置为空，以便颜色取自指定字段。我在 pos 属性中对条纹的位置进行了编码，并希望以此对片段进行排序。我也试过稍微改变红色条纹的颜色，但这没有帮助。

规格：

{
  "$schema": "https://vega.github.io/schema/vega-lite/v4.json",
  "description": "Fun with Flags",
  "data": {
    "values": [
      {"h": 5, "color": "#aa151b", "pos": 6, "country": "spain"},
      {"h": 5, "color": "#f1bf00", "pos": 4, "country": "spain"},
      {"h": 5, "color": "#aa152b", "pos": 2, "country": "spain"}
    ]
  },
  "width": {"step": 300},
  "mark": {"type": "bar"},
  "encoding": {
    "x": {"field": "country", "type": "nominal"},
    "y": {"field": "h", "type": "quantitative"},
    "color": { 
      "field": "color", 
      "scale": null,
      "type": "nominal",
      "sort": {"field": "pos", "op": "min", "order": "descending"}
    }
  }
}

这是 Vega Editor with the Spec 的 link。

Answer 1

我不得不指定顺序通道，而不是对颜色编码进行排序，如described in the docs。

这给了我以下规范：

{
  "$schema": "https://vega.github.io/schema/vega-lite/v4.json",
  "description": "Fun with Flags",
  "data": {
    "values": [
      {"h": 5, "color": "#aa152b", "pos": 6, "country": "spain"},
      {"h": 5, "color": "#f1bf00", "pos": 4, "country": "spain"},
      {"h": 5, "color": "#aa152b", "pos": 2, "country": "spain"}
    ]
  },
  "width": {"step": 300},
  "mark": {"type": "bar"},
  "encoding": {
    "x": {"field": "country", "type": "nominal"},
    "y": {"field": "h", "type": "quantitative"},
    "color": { 
      "field": "color", 
      "scale": null,
      "type": "nominal"
    },
    "order": {
      "field": "pos",
      "type": "quantitative"
    }
  }
}

并正确的西班牙国旗：

Link to Vega Editor

对条形图的堆栈段进行排序

Sort the stack segments of barchart

vega-lite