Vega-Lite饼图百分比标签无法设为黑色，求助问题原因

我参考Vega-Lite的饼图示例，修改代码实现了显示百分比标签的饼图，效果正常。但尝试在text mark中添加"color":"black"属性时无变化，又尝试在encoding中设置color值为black，却出现异常显示。

初始代码如下：

vegaEmbed("#pie-chart", {
  "$schema": "https://vega.github.io/schema/vega-lite/v5.json",
  "description": "A simple pie chart with embedded data.",
  "data": {
    "values": [
      {"category": 1, "value": 4},
      {"category": 2, "value": 6},
      {"category": 3, "value": 10},
      {"category": 4, "value": 3},
      {"category": 5, "value": 7},
      {"category": 6, "value": 8}
    ]
  },
  "transform": [{"calculate": "datum.value + ' %'", "as": "label"}],
  "encoding": {
    "theta": {"field": "value", "type": "quantitative", "stack": true},
    "color": {"field": "category", "type": "nominal", "legend": null}
  },
  "layer": [
    {
      "mark": {"type": "arc"}
    },
    {
      "mark": {"type": "text", "radius": 120},
      "encoding": {
        "text": {"field": "label", "type": "nominal"}
      }
    }
  ]
}
);

HTML代码：

<!DOCTYPE html>
<html>

<head>
  <title>Data visualizer</title>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <script src="https://cdn.jsdelivr.net/npm/vega@5"></script>
  <script src="https://cdn.jsdelivr.net/npm/vega-lite@5"></script>
  <script src="https://cdn.jsdelivr.net/npm/vega-embed@6"></script>
</head>

<body>
  <span id="pie-chart"></span>
</body>

</html>

第一次尝试修改text mark：

"mark": {"type": "text", "radius": 120, "color":"black"},

无效果。

第二次尝试在encoding中设置color：

{
  "mark": {"type": "text", "radius": 120},
  "encoding": {
    "text": {"field": "label", "type": "nominal"},
    "color": {"value":"black"}
  }
}

出现异常显示。

问题原因分析 #

1. mark中设置color无效的原因：
   顶层encoding中的color字段绑定了category，图层（layer）会继承顶层的编码配置。text图层默认继承了顶层的color编码，这会覆盖mark层面的color设置——Vega-Lite中编码层面的样式优先级高于mark层面的直接设置。

2. encoding中设置color出现异常的原因：
   顶层theta配置了stack: true，Vega-Lite的堆叠默认基于color字段分组。当在text图层的encoding中设置color: {"value": "black"}时，所有数据的color值统一为black，堆叠分组失效，所有文本的theta计算被合并为同一组，导致所有标签重叠在同一位置，出现异常。

解决方案 #

方法一：覆盖顶层color编码，保留mark层面的颜色设置

在text图层的encoding中显式设置color: null，取消继承顶层的color编码，让mark层面的color设置生效：

{
  "mark": {"type": "text", "radius": 120, "color": "black"},
  "encoding": {
    "text": {"field": "label", "type": "nominal"},
    "color": null
  }
}

方法二：在encoding中设置固定颜色，同时指定堆叠分组字段

在text图层的encoding中设置固定颜色的同时，显式指定theta的groupby为category，确保堆叠仍按原分组计算：

{
  "mark": {"type": "text", "radius": 120},
  "encoding": {
    "text": {"field": "label", "type": "nominal"},
    "color": {"value": "black"},
    "theta": {"field": "value", "type": "quantitative", "stack": true, "groupby": ["category"]}
  }
}

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