I am having trouble implementing a half pie chart with a needle and text in an Angular 12 app using D3.js. I have added the needle successfully, but I am struggling to display the value at the end of the needle as shown in this image: Needle with Value
Despite my efforts, I have not been able to render the value at the end of the needle.
Below is a snippet of my code:
this.svg = d3
.select('div#pie')
.append('svg')
.attr('width',this.svgWidth)
.attr('height',this.svgHeight)
.attr('id','pie-svg')
.append('g')
.attr('class','ps')
.attr(
'transform',
'translate('+this.svgWidth/2+',115)');
this.colorRanges = d3.scaleOrdinal()
.domain(['a', 'b', 'c'])
.range(this.colors)
this.pie = d3
.pie()
.startAngle(-90 * (Math.PI / 180))
.endAngle(90 * (Math.PI / 180))
.value((d: any,i:number) => d[1])
.sort((a:any, b:any) => d3.ascending(a[0], b[0]));
this.svg.selectAll('rect')
.data(this.pie(Object.entries(this.pieData)))
.join('path')
.attr('d',
d3.arc().innerRadius(75).outerRadius(35))
.attr('fill', (d:any,i:number) => this.colorRanges(d3.schemeSet2[i]))
.attr('stroke','none')
.style('stroke-width','1px')
.style('opacity',1);
this.svg
.selectAll('.needle')
.data([0])
.enter()
.append('line')
.attr('x1', -10)
.attr('x2', -75)
.attr('y1', 0)
.attr('y2', 0)
.classed('needle', true)
.attr('transform', 'rotate(135)');
I attempted to add additional code from various sources without success:
var labelArc = this.svg.arc()
.outerRadius(75)
.innerRadius(35);
this.svg.append("text")
.attr("transform", function(d: any) {
return "translate(" + labelArc.centroid(d) + ")"; })
.attr("dy", ".35em")
.text("75");
As a novice in both D3 and Angular, I am facing difficulties moving forward.
Can someone please assist me in displaying the text on top of the needle?