Vega-Lite堆叠柱状图X轴标签换行后堆叠异常的原因与解决方法

问题原因 #

你通过transform中的split函数将原字符串类型的address字段转为数组类型后，Vega-Lite在处理ordinal类型字段的分组堆叠时，是基于值的严格相等性判定分组的。在JavaScript中，即使两个数组的内容完全一致，它们也是不同的引用对象，会被识别为不同的分组键。这就导致原本属于同一地址的不同gender数据被拆分到不同的X轴类别下，堆叠逻辑自然失效。

解决办法 #

方案一：分离分组字段与标签字段 #

保留原字符串类型的address用于分组（保证堆叠正常），新增拆分后的数组字段专门用于标签显示，通过axis.labelExpr关联标签内容：

{
  "$schema": "https://vega.github.io/schema/vega-lite/v4.json",
  "height": "container",
  "width": 300,
  "data": {
    "values": [
      {
        "age": 25,
        "gender": "F",
        "address": "927 Bay Parkway"
      },
      {
        "age": 25,
        "gender": "M",
        "address": "927 Bay Parkway"
      },
      {
        "age": 33,
        "gender": "F",
        "address": "685 School Lane"
      },
      {
        "age": 33,
        "gender": "M",
        "address": "685 School Lane"
      }
    ]
  },
  "autosize": {"contains": "padding", "type": "fit", "resize": true},
  "transform": [{"calculate": "split(datum.address, ' ')", "as": "split_address"}],
  "layer": [
    {
      "mark": {"type": "bar"},
      "encoding": {
        "y": {
          "field": "age",
          "type": "quantitative",
          "axis": {"title": "sum_balance"}
        },
        "x": {
          "field": "address",
          "type": "ordinal",
          "axis": {
            "title": "Name",
            "labelAngle": -45,
            "labelFontSize": 12,
            "labelExpr": "datum.split_address",
            "labelLimit": 60
          }
        },
        "color": {"field": "gender"}
      },
      "selection": {"brush": {"type": "interval"}}
    }
  ]
}

这个方案中，原address字符串确保同一地址的不同gender数据被归为同一分组，堆叠正常；拆分后的split_address数组通过labelExpr传递给轴标签，配合labelLimit实现自动换行。

方案二：将拆分后的数组转为带换行符的字符串 #

把拆分后的数组用换行符连接成字符串，既保证分组的字符串相等性，又能实现标签换行：

{
  "$schema": "https://vega.github.io/schema/vega-lite/v4.json",
  "height": "container",
  "width": 300,
  "data": {
    "values": [
      {
        "age": 25,
        "gender": "F",
        "address": "927 Bay Parkway"
      },
      {
        "age": 25,
        "gender": "M",
        "address": "927 Bay Parkway"
      },
      {
        "age": 33,
        "gender": "F",
        "address": "685 School Lane"
      },
      {
        "age": 33,
        "gender": "M",
        "address": "685 School Lane"
      }
    ]
  },
  "autosize": {"contains": "padding", "type": "fit", "resize": true},
  "transform": [{"calculate": "split(datum.address, ' ').join('\\n')", "as": "formatted_address"}],
  "layer": [
    {
      "mark": {"type": "bar"},
      "encoding": {
        "y": {
          "field": "age",
          "type": "quantitative",
          "axis": {"title": "sum_balance"}
        },
        "x": {
          "field": "formatted_address",
          "type": "ordinal",
          "axis": {
            "title": "Name",
            "labelAngle": 0,
            "labelFontSize": 12
          }
        },
        "color": {"field": "gender"}
      },
      "selection": {"brush": {"type": "interval"}}
    }
  ]
}

这里通过join('\\n')将数组转为带换行符的字符串，X轴基于字符串分组保证堆叠正常，标签会自动识别换行符实现多行显示。

内容的提问来源于stack exchange，提问作者Cora Sutton