Within my Angular v14 project, I am utilizing D3 v7 to create a captivating donut chart featuring two distinct styles of labels. Here's a visual representation: https://i.sstatic.net/tTegv.png
The following code snippet showcases how I incorporate bold labels:
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";
});
As illustrated, the font weight and color are defined within the code. However, my intention is to achieve this through my .scss file by implementing:
.bold-label
{
color: "#253b62";
font-weight:500;
}
Despite attempting to use
.attr("class","bold-label")
neither the color nor the font-weight were applied successfully.
I also experimented with
.class("bold-label")
This approach not only failed to apply the class but also caused misalignment of the % labels on the left-hand side.
In a further attempt, I introduced
::ng-deep
followed by
encapsulation: ViewEncapsulation.None,
Regrettably, this adjustment did not yield the desired outcome. What would be the correct method for applying the class in this scenario?