如何在Deneb堆叠条形图中完整显示strokeWidth（不受堆叠顺序影响）

问题场景 #

使用Deneb制作堆叠条形图时，为不同条形设置不同粗细的strokeWidth后，堆叠排序会导致粗边框被相邻条形遮挡，无法完整显示。（注：因特定功能需求，必须使用Deneb类工具，不考虑其他可视化类型）

原代码 #

{
  "data": {
    "values": [
      {"Yr": 2025, "BarName": "P101", "BarHt": 0.5, "stWidth": 5},
      {"Yr": 2025, "BarName": "P102", "BarHt": 0.6, "stWidth": 1},
      {"Yr": 2025, "BarName": "P103", "BarHt": 0.7, "stWidth": 5},
      {"Yr": 2026, "BarName": "P104", "BarHt": 0.8, "stWidth": 1},
      {"Yr": 2026, "BarName": "P105", "BarHt": 0.9, "stWidth": 5},
      {"Yr": 2026, "BarName": "P106", "BarHt": 0.8, "stWidth": 1}
    ]
  },
  "transform": [
    {
      "stack": "BarHt",
      "groupby": ["Yr"],
      "as": ["ymin", "ymax"]
    },
    {
      "calculate": "(datum.ymin + datum.ymax) / 2",
      "as": "ymid"
    }
  ],
  "encoding": {
    "x": {"field": "Yr"}
  },
  "layer": [
    {
      "mark": {
        "type": "bar",
        "stroke": "black",
        "strokeWidth": {"expr": "datum['stWidth']"}
      },
      "encoding": {
        "y": {"field": "ymin", "type": "quantitative"},
        "y2": {"field": "ymax"}
      }
    },
    {
      "mark": {"type": "text"},
      "encoding": {
        "text": {"field": "BarName"},
        "y": {"field": "ymid", "type": "quantitative"}
      }
    }
  ]
}

原效果 #

解决方法 #

通过zindex属性控制条形的绘制层级，让边框较粗的条形显示在顶层，避免被其他条形遮挡。

修改后的代码 #

{
  "data": {
    "values": [
      {"Yr": 2025, "BarName": "P101", "BarHt": 0.5, "stWidth": 5},
      {"Yr": 2025, "BarName": "P102", "BarHt": 0.6, "stWidth": 1},
      {"Yr": 2025, "BarName": "P103", "BarHt": 0.7, "stWidth": 5},
      {"Yr": 2026, "BarName": "P104", "BarHt": 0.8, "stWidth": 1},
      {"Yr": 2026, "BarName": "P105", "BarHt": 0.9, "stWidth": 5},
      {"Yr": 2026, "BarName": "P106", "BarHt": 0.8, "stWidth": 1}
    ]
  },
  "transform": [
    {
      "stack": "BarHt",
      "groupby": ["Yr"],
      "as": ["ymin", "ymax"]
    },
    {
      "calculate": "(datum.ymin + datum.ymax) / 2",
      "as": "ymid"
    }
  ],
  "encoding": {
    "x": {"field": "Yr"}
  },
  "layer": [
    {
      "mark": {
        "type": "bar",
        "stroke": "black",
        "strokeWidth": {"expr": "datum['stWidth']"},
        // 根据边框粗细设置层级，粗边框条形层级更高
        "zindex": {"expr": "datum['stWidth']"}
      },
      "encoding": {
        "y": {"field": "ymin", "type": "quantitative"},
        "y2": {"field": "ymax"}
      }
    },
    {
      "mark": {"type": "text"},
      "encoding": {
        "text": {"field": "BarName"},
        "y": {"field": "ymid", "type": "quantitative"}
      }
    }
  ]
}

原理说明 #

• zindex属性决定图形元素的绘制顺序，值越大的元素越晚绘制，显示在顶层
• 通过将zindex绑定到stWidth字段，让边框越粗的条形拥有越高的层级，其边框就不会被其他条形遮挡

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