如何在Vega-Lite中创建带预定义半径的径向图？解决重叠异常

基于Vega-Lite的Radial Plot示例开发变体，需求是预定义每个弧的半径。在数据中添加rad字段并绑定到radius编码后，出现弧重叠异常——饼图按半径分组而非保持整体堆叠状态。尝试直接引用字段、移除stack和scale编码均未解决，询问是否可通过Vega-Lite内置的arc/pie功能解决，或是否属于底层Bug。

当前配置代码：

{
  "$schema": "https://vega.github.io/schema/vega-lite/v5.json",
  "description": "A simple radial chart with embedded data.",
  "data": {
    "values": [
      {"data": 12, "rad": 12}, 
      {"data": 23, "rad": 11}, 
      {"data": 47, "rad": 10}, 
      {"data": 6,  "rad": 12}, 
      {"data": 52, "rad": 9}, 
      {"data": 19, "rad": 8}
    ]
  },
  "mark": {"type": "arc", "innerRadius": 20, "stroke": "#fff"},
  "encoding": {
    "theta": {"field": "data", "type": "quantitative", "stack": true},
    "radius": {"field": "rad", "scale": {"type": "linear"}},
    "color": {"field": "data", "type": "nominal", "legend": null}
  }
}

这不是Bug，是Vega-Lite自动堆叠的默认行为：当radius绑定数据字段时，堆叠逻辑会按radius值分组，相同半径的弧在组内堆叠，不同半径的组各自独立占满一圈，最终导致重叠。要实现所有弧按data值整体堆叠、同时自定义半径的效果，需手动计算每个弧的起始/结束角度，而非依赖自动堆叠。

具体实现步骤：

1. 通过数据变换计算所有data值的总和，用于将数值转换为弧度（一圈对应2π）
2. 计算每个数据点的累计值，推导对应弧的起始和结束弧度
3. 将theta编码拆分为theta（起始角度）和theta2（结束角度），绑定计算后的字段

修改后的配置代码：

{
  "$schema": "https://vega.github.io/schema/vega-lite/v5.json",
  "description": "Radial chart with predefined arc radii and stacked angles.",
  "data": {
    "values": [
      {"data": 12, "rad": 12}, 
      {"data": 23, "rad": 11}, 
      {"data": 47, "rad": 10}, 
      {"data": 6,  "rad": 12}, 
      {"data": 52, "rad": 9}, 
      {"data": 19, "rad": 8}
    ]
  },
  "transform": [
    // 计算所有data值的总和
    {"window": [{"op": "sum", "field": "data", "as": "total"}], "frame": [null, null]},
    // 计算从第一个数据到当前数据的累计值
    {"window": [{"op": "sum", "field": "data", "as": "cumulative"}], "frame": [null, 0]},
    // 计算弧的起始弧度
    {"calculate": "(datum.cumulative - datum.data) / datum.total * 2 * PI", "as": "theta_start"},
    // 计算弧的结束弧度
    {"calculate": "datum.cumulative / datum.total * 2 * PI", "as": "theta_end"}
  ],
  "mark": {"type": "arc", "innerRadius": 20, "stroke": "#fff"},
  "encoding": {
    "theta": {"field": "theta_start", "type": "quantitative", "scale": {"range": [0, 6.283185307179586]}},
    "theta2": {"field": "theta_end"},
    "radius": {"field": "rad", "type": "quantitative"},
    "color": {"field": "data", "type": "nominal", "legend": null}
  }
}

此配置会让所有弧按data值连续堆叠，同时每个弧使用预定义的rad值作为半径，完全符合需求。

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