Angular 中的 D3 将类应用于标签

Question

在我使用 D3 v7 的 Angular v14 项目中，我绘制了一个带有 2 种标签样式的圆环图，如下所示：

这是添加粗体标签的代码：

  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 + ")";
  })
  .attr("stroke", "#253b62")
  .style("font-weight", "500")
  //.attr("class","bold-label")
  //.class("bold-label")
  .attr("text-anchor", (d: d3.DefaultArcObject) => {
    var midangle = d.startAngle + (d.endAngle - d.startAngle) / 2;
    return midangle < Math.PI ? "start" : "end";
  });

如你所见，我用这些指定字体粗细和颜色：

.attr("stroke", "#253b62")
.style("font-weight", "500")

但我想在我的 .scss 文件中使用

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

我尝试使用

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

未应用颜色或字体粗细

我也尝试过

.class("bold-label")

这不仅没有应用类，而且还弄乱了左侧 % 标签的位置。

这里正确的报课方式是什么？

Answer 1

兄弟，我找到了一个解决方案，我为你的示例创建了一个分支：

https://stackblitz.com/edit/angular-d3-js-donut-chart-qttkmx?file=src%2Fstyles.css

首先在这个组件中，我在 d3-donut.component 中添加了这一行：

  // Add the polylines between chart and labels:
    this.svg
      .selectAll("allLabels")
      .data(data_ready)
      .enter()
      .append("text")
      .text(d => {
        return d.data.name;
      })
      **.attr("class", d => {
        return 'super-class'
      })**
      .attr("transform", d => {
        var pos = outerArc.centroid(d);
        var midangle = d.startAngle + (d.endAngle - d.startAngle) / 2;
        pos[0] = this.radius * 0.99 * (midangle < Math.PI ? 1 : -1);
        return "translate(" + pos + ")";
      })
      .style("text-anchor", d => {
        var midangle = d.startAngle + (d.endAngle - d.startAngle) / 2;
        return midangle < Math.PI ? "start" : "end";
      });
  }

.attr("类", d => { 返回“超类” }) 在这行中，我将类“超类”添加到所有

<text>

标记中，但是如果您在此文件中定义 css 类，我发现一些非常奇怪的东西： d3-donut.component.sscs ，该类没有' t 将样式应用于元素，但是如果您在 styles.css （根级别文件夹）中声明类，这就像一个魅力，只需查看示例，我认为它是一个 css 封装问题，因此您可以在以下位置定义您的 d3 样式这个文件包装在 #id 容器中，和平兄弟！