使用 Deneb 在条上显示描边宽度

Question

我有一个使用 Deneb 创建的简单条形图。 当使用粗的描边宽度时，条形的排序顺序似乎会影响笔划的显示方式（在周围条形的顶部或后面）。 有没有办法显示整个笔画？ 下面是我的代码和结果。 [这是我实际作品的精简版，所以请不要建议使用其他视觉类型；我需要使用像 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"}
      }
    }
  ]
}

Answer 1

在单独的标记中绘制笔画。例如

{
  "$schema": "https://vega.github.io/schema/vega-lite/v5.json",
  "width": 400,
  "height": 300,
  "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"
      },
      "encoding": {
        "y": {"field": "ymin", "type": "quantitative"},
        "y2": {"field": "ymax"}
      }
    },
    {
      "mark": {
        "type": "bar", "fill":"transparent",
        "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"}
      }
    }
  ]
}