Angular14+D3v7环形图标签CSS类应用的正确方法

步骤1：修正SCSS类的语法错误 #

你的SCSS类里颜色值加了引号，这会导致样式失效，先去掉引号：

.bold-label {
  color: #253b62;
  font-weight: 500;
}

步骤2：正确在D3中添加类 #

首先移除行内的样式设置代码（行内样式优先级高于类样式，会覆盖类的效果），然后用D3推荐的方式添加类：

推荐方式：使用.classed()方法 #

this.svg
  .selectAll("allLabels")
  .data(data_ready)
  .enter()
  .append("text")
  .text((d:{data: NameValueColor}) => {
    return d.data.value.toString()+"%";
  })
  .attr("transform", (d: d3.DefaultArcObject) => {
    var pos = outerArc.centroid(d);
    var midangle = d.startAngle + (d.endAngle - d.startAngle) / 2;
    pos[0] = this.radius * 0.95 * (midangle < Math.PI ? 1 : -1);
    pos[1] +=10;
    return "translate(" + pos + ")";
  })
  // 移除原有的行内stroke和font-weight设置
  .classed("bold-label", true) // 正确添加类
  .attr("text-anchor", (d: d3.DefaultArcObject) => {
    var midangle = d.startAngle + (d.endAngle - d.startAngle) / 2;
    return midangle < Math.PI ? "start" : "end";
  });

备选方式：使用.attr()方法 #

如果习惯用属性设置类，也可以替换上面的.classed行：

.attr("class", "bold-label")

步骤3：处理Angular样式封装问题 #

如果上述操作后样式仍不生效，是因为Angular的视图封装机制会给组件样式添加唯一标识，D3动态生成的元素无法匹配到组件内的样式，可通过以下两种方式解决：

方式一：用::ng-deep穿透样式 #

在组件的SCSS文件中用::ng-deep包裹类：

::ng-deep .bold-label {
  color: #253b62;
  font-weight: 500;
}

方式二：将样式放到全局样式文件 #

把.bold-label类直接写入项目根目录的styles.scss（全局样式文件），全局样式会作用到所有DOM元素，包括D3动态生成的标签。

关键注意事项 #

• 不要同时保留行内样式和类样式，行内样式优先级更高，会覆盖类的效果。
• 你之前用的.class("bold-label")是错误用法：D3的.class()方法是用来切换类的（需要传入布尔值控制添加/移除），直接传入类名会导致DOM异常，这就是标签位置错乱的原因。

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