在Vega中绘制多弧线图表：添加带数值的穿透刻度线

可以实现该需求，你需要在现有图表配置中新增两个图层：一个用于绘制穿透所有弧线的刻度线，另一个用于在刻度线顶部显示对应数值。以下是具体实现方案：

核心思路 #

1. 基于分类项对应的极坐标角度（theta）定位刻度线；
2. 刻度线从图表中心区域延伸至最外层弧线顶部；
3. 数值标签与刻度线角度对齐，放置在刻度线顶端。

修改后的完整配置（基于你的原配置调整） #

{
  "$schema": "https://vega.github.io/schema/vega/v5.json",
  "width": 600,
  "height": 600,
  "padding": 5,
  "signals": [
    {"name": "tooltip", "value": {}, "on": [{"events": "rect:mouseover", "update": "datum"}, {"events": "rect:mouseout", "update": "{}"}]}
  ],
  "data": [
    {
      "name": "table",
      "values": [
        {"category": "A", "group": "X", "value": 0.4},
        {"category": "A", "group": "Y", "value": 0.6},
        {"category": "A", "group": "Z", "value": 0.8},
        {"category": "B", "group": "X", "value": 0.3},
        {"category": "B", "group": "Y", "value": 0.5},
        {"category": "B", "group": "Z", "value": 0.7},
        {"category": "C", "group": "X", "value": 0.5},
        {"category": "C", "group": "Y", "value": 0.7},
        {"category": "C", "group": "Z", "value": 0.9},
        {"category": "D", "group": "X", "value": 0.2},
        {"category": "D", "group": "Y", "value": 0.4},
        {"category": "D", "group": "Z", "value": 0.6}
      ]
    }
  ],
  "scales": [
    {
      "name": "radius",
      "type": "linear",
      "domain": {"data": "table", "field": "value"},
      "range": [50, 250],
      "zero": true
    },
    {
      "name": "theta",
      "type": "point",
      "domain": {"data": "table", "field": "category"},
      "range": {"step": (2 * Math.PI) / 4}
    },
    {
      "name": "color",
      "type": "ordinal",
      "domain": {"data": "table", "field": "group"},
      "range": ["#ff7f0e", "#2ca02c", "#1f77b4"]
    }
  ],
  "layers": [
    // 原有弧线图层
    {
      "mark": {"type": "arc", "innerRadius": 50, "stroke": "#fff"},
      "encoding": {
        "theta": {"field": "category", "scale": "theta"},
        "radius": {"field": "value", "scale": "radius"},
        "color": {"field": "group", "scale": "color"},
        "tooltip": {"field": "value"}
      }
    },
    // 新增：刻度线图层
    {
      "mark": {"type": "line", "stroke": "#333", "strokeWidth": 1.5},
      "encoding": {
        "theta": {"field": "category", "scale": "theta"},
        "radius": {"value": 0}, // 线条起点（中心区域）
        "radius2": {"value": 250}, // 线条终点（最外层弧线半径）
        "color": {"value": "#333"}
      }
    },
    // 新增：数值标签图层
    {
      "mark": {"type": "text", "dy": -12, "fontSize": 13, "fontWeight": "bold"},
      "encoding": {
        "theta": {"field": "category", "scale": "theta"},
        "radius": {"value": 260}, // 标签位置（略大于最外层半径）
        "text": {"field": "value", "aggregate": "max", "format": ".1f"}, // 取每个分类的最大值并格式化
        "color": {"value": "#000"}
      }
    }
  ]
}

关键调整说明 #

• 刻度线图层：使用line标记，通过radius和radius2定义线条起止位置，theta绑定分类字段确保角度对齐；
• 数值标签图层：使用text标记，radius设为略大于最外层弧线半径的值，通过aggregate: "max"匹配最外层弧线对应的数值；
• 样式自定义：可按需调整刻度线的粗细、颜色，以及标签的字体大小、垂直偏移量等属性。

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