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

【问题标题】：Sort the stack segments of barchart对条形图的堆栈段进行排序
【发布时间】：2020-05-07 09:18:48
【问题描述】：

我玩过堆积条形图，想用 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的链接。

【问题讨论】：

标签： vega-lite

【解决方案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

【讨论】：