如何在Deneb热力图中正确分类排序？添加数据标签后排序异常

问题现象 #

使用Deneb热力图时，不显示数据标签的情况下排序正常，但添加对应Days字段的数据标签后，分类会按字母顺序排序，无法维持原有指定排序。

解决思路 #

Vega-Lite中，每个图层的编码如果未显式指定排序规则，会默认采用字母序。因此需要在文本标签层的x和y编码中，添加与矩形热力图层完全一致的排序配置，保证两层的排序逻辑统一。

修改后的完整代码 #

{
 "$schema": "https://vega.github.io/schema/vega-lite/v5.json",
 "usermeta": {
 "deneb": {
  "build": "1.4.0.0",
  "metaVersion": 1,
  "provider": "vegaLite",
  "providerVersion": "5.4.0"
  },
  "interactivity": {
  "tooltip": true,
  "contextMenu": true,
  "selection": true,
  "highlight": true,
  "dataPointLimit": 50
  },
  "information": {
  "name": "heatmap with bars - themed",
  "description": "Heatmap, uses the 5th theme color as bar chart, 8th color for font, and sentiment colors for gradient. X and Y axis are using Date table from Bravo, and are sorted for X= Month, Y = Day of Week. If you are using a different ordinal column, please make sure the columns are properly sorted",
  "author": "Injae Park",
  "uuid": "57ee5f3a-4a51-4230-8885-7db391a05805",
  "generated": "2022-10-19T11:12:58.962Z"
 },
  "dataset": [
  {
    "key": "unit",
    "name": "unit",
    "description": "From Bravo, is 3 character abbreviation, i.e. Mon, Tue, Wed",
    "type": "text",
    "kind": "column"
  },
  {
    "key": "Days",
    "name": "Days",
    "description": "From Bravo, is 3 character abbreviation, i.e. Jan, Feb, Mar",
    "type": "text",
    "kind": "column"
  },
  {
    "key": "%of_Picku",
    "name": "%of_Picku",
    "description": "",
    "type": "numeric",
    "kind": "measure"
  }
 ]
 },
"config": {
"autosize": {
  "type": "fit",
  "contains": "padding"
},
"view": {"stroke": "transparent"}
 },
"data": {"name": "dataset"},
"spacing": 15,
"bounds": "flush",
"vconcat": [
{
  "width": 900,  
  "height": 100, 
  "layer": [
    {
      "mark": {
        "type": "rect",
        "stroke": "white",
        "tooltip": true,
        "cornerRadius": 6
      },
      "encoding": {
        "y": {
          "field": "unit",
          "type": "ordinal",
          "title": "",
          "sort": ["pv045", "pv055", "pv056"],
          "axis": {
            "domain": false,
            "ticks": false,
            "labels": true,
            "labelAngle": 0,
            "labelPadding": 5,
            "labelColor": {
              "expr": "pbiColor(1)"
            }
          }
        },
        "x": {
          "field": "Days",
          "type": "ordinal",
          "title": "Date",
          "sort": ["0 days", "1 days", "2 days", "3 days", "4 days", "5 days", "6 days", "7 days", "8 days", "9 days", "10 days", "11 days", "12 days", "13 days"],
          "axis": {
            "domain": false,
            "ticks": false,
            "labels": true,
            "labelAngle": 0,
            "labelColor": {
              "expr": "pbiColor(1)"
            },
            "titleColor": {
              "expr": "pbiColor(1)"
            }
          }
        },
        "color": {
          "aggregate": "mean",
          "field": "%of_Picku",
          "type": "quantitative",
          "title": "%",
          "scale": {
            "scheme": "pbiColorLinear"
          },
          "legend": {
            "direction": "vertical",
            "titleColor": {
              "expr": "pbiColor(1)"
            },
            "labelColor": {
              "expr": "pbiColor(1)"
            },
            "gradientLength": 100
          }
        }
      }
    },
    {
      "mark": {
        "type": "text",
        "tooltip": true
      },
      "encoding": {
        "y": {
          "field": "unit",
          "type": "ordinal",
          "sort": ["pv045", "pv055", "pv056"]
        },
        "x": {
          "field": "Days",
          "type": "ordinal",
          "sort": ["0 days", "1 days", "2 days", "3 days", "4 days", "5 days", "6 days", "7 days", "8 days", "9 days", "10 days", "11 days", "12 days", "13 days"]
        },
        "text": {
          "field": "%of_Picku",
          "type": "quantitative",
          "format": ".1%"
        },
        "color": {
          "condition": {
            "test": "datum['%of_Picku'] < 50", 
            "value": "black"
          },
          "value": "white"
        }
      }
      }
    ]
   }
    ]
}

关键修改点 #

• 在文本标签层的y编码中添加与矩形层一致的排序规则：sort: ["pv045", "pv055", "pv056"]
• 在文本标签层的x编码中添加与矩形层一致的排序规则：sort: ["0 days", "1 days", "2 days", "3 days", "4 days", "5 days", "6 days", "7 days", "8 days", "9 days", "10 days", "11 days", "12 days", "13 days"]

内容的提问来源于stack exchange，提问作者Vali Mammadov