I'm currently trying to grasp the concept of utilizing the function attrTween in D3. My goal is to create a pie-chart using the example found at http://bl.ocks.org/mbostock/5100636.
However, I've encountered some challenges when it comes to the transition aspect of the implementation.
private populateGauge(): void {
const innerRadius = this.radius - 50;
const outerRadius = this.radius - 10;
const arc = d3
.arc()
.innerRadius(innerRadius)
.outerRadius(outerRadius)
.startAngle(0);
const background = this.svg
.append('path')
.datum({ endAngle: this.tau })
.style('fill', '#ddd')
.attr('d', arc);
this.myEndAngle = { endAngle: (this.gaugeData.value / 100) * this.tau };
const foreground = this.svg
.append('path')
.datum(this.myEndAngle)
.style('fill', 'orange')
.attr('d', arc);
foreground
.transition()
.duration(1500)
.attrTween('d', function(newAngle) {
return function(d) {
const interpolate = d3.interpolate(d.endAngle, newAngle);
return function(t) {
d.endAngle = interpolate(t);
return arc(d);
};
};
});
}
https://i.sstatic.net/pcCz7.png
I've attempted using simple base cases and only zeros in the interpolate function, but I'm facing an error with the last return statement that is causing issues (return arc(d));
Argument of type 'number' is not assignable to parameter of type 'DefaultArcObject'.
How can I overcome these obstacles? Feel free to ask for any additional information you require.