Deneb中3x3子图实现堆叠条形图的transform配置位置问题

问题描述 #

计划实现的可视化效果：

• 基于分类x轴、y轴的交叉值生成3x3网格单元格
• 每个单元格内展示按项目名称维度拆分的堆叠条形图
• 后续可基于z值配置颜色编码，实现分组、层级维度的高亮效果

开发异常：使用初始代码运行时，条形相互层叠，未出现预期堆叠效果。已确认需要引入堆叠转换逻辑，其中度量定义为cnt = COUNT('Table'[name])，对应转换块代码如下：

"transform": [
  {
    "stack": "cnt",
    "as": ["ymin", "ymax"],
    "groupby": ["x", "y"]
  }
]

核心疑问：不清楚上述转换块的插入位置和配套配置方式，初始开发代码如下：

{
  "data": {"name": "dataset"},
  "layer": [
    {
      "mark": {
        "type": "bar",
        "stroke": "black",
        "strokeWidth": 1,
        "tooltip": true
      }
    },
    {
      "mark": "text",
      "encoding": {
        "text": {
          "field": "Name",
          "type": "nominal"
        }
      }
    }
  ],
  "encoding": {
    "x": {
      "field": "x",
      "type": "nominal",
      "scale": {
        "domain": ["low", "med", "high"]
      },
      "axis": {
        "title": "X Level",
        "labelAngle": 0
      }
    },
    "y": {
      "field": "y",
      "type": "nominal",
      "scale": {
        "domain": ["high", "med", "low"]
      },
      "axis": {"title": "Y Level"}
    }
  }
}

配置方法 #

• transform属于Vega-Lite顶级配置属性，和data、layer、encoding平级，直接插入到data配置块之后即可生效。
• 初始代码缺少堆叠效果的配套配置，需要同步调整：
  • 原分类x、y字段改为facet行/列分面配置，实现3x3独立单元格的布局
  • 条形标记的y轴绑定堆叠生成的ymin、ymax字段，不能直接绑定原分类y字段
  • 项目名称Name字段绑定到颜色编码，作为堆叠的拆分维度
  • 文本标记配置y轴位置为堆叠块中点，保证标签显示在对应条形中心

修正后的可运行完整代码如下：

{
  "data": {"name": "dataset"},
  "transform": [
    {
      "stack": "cnt",
      "as": ["ymin", "ymax"],
      "groupby": ["x", "y"]
    }
  ],
  "facet": {
    "row": {
      "field": "y",
      "type": "nominal",
      "sort": ["high", "med", "low"],
      "header": {"title": "Y Level"}
    },
    "column": {
      "field": "x",
      "type": "nominal",
      "sort": ["low", "med", "high"],
      "header": {"title": "X Level", "labelAngle": 0}
    },
    "spacing": 0
  },
  "spec": {
    "layer": [
      {
        "mark": {
          "type": "bar",
          "stroke": "black",
          "strokeWidth": 1,
          "tooltip": true
        },
        "encoding": {
          "y": {
            "field": "ymin",
            "type": "quantitative",
            "axis": null
          },
          "y2": {"field": "ymax"},
          "color": {
            "field": "Name",
            "type": "nominal",
            "legend": null
          }
        }
      },
      {
        "mark": "text",
        "encoding": {
          "y": {
            "field": "ymin",
            "type": "quantitative",
            "bandPosition": 0.5
          },
          "text": {
            "field": "Name",
            "type": "nominal"
          }
        }
      }
    ]
  }
}

后续配置z值颜色高亮时，直接在条形的encoding.color中替换对应字段、配置条件编码规则即可。

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