I already asked this, but I got advice that I post a new question, since I did not assume that the problem could be related to using TypeScript.
So, I am trying to create an interface on d3. I found the arc animation code (http://bl.ocks.org/mbostock/5100636), and I want to change it a bit (without function arcTween()). Here is part of my code (this code is in a loop function that runs itself):
var arc3 = d3.arc().innerRadius(77).outerRadius(90).startAngle(0);
var foregroundArc3 = imgs3
.append('path')
.attr('d', arc3)
.attr('stroke', 'white')
.attr('fill', 'white')
.style('fill-opacity', 0.5)
.attr('transform', 'translate('+(146.5)+','+(150.9)+')')
.datum({endAngle: 0.0628*90, newAngle: 0.0628*270})
.transition()
.duration(1500)
.attrTween('d', (d) => {
return (t) => {
const interpolate = d3.interpolate(d.endAngle, d.newAngle);
d.endAngle = interpolate(t);
return arc3(d);
};
});
But there error: Argument of type '{ endAngle: number; newAng: number; }' is not assignable to parameter of type 'DefaultArcObject'. Property 'innerRadius' is missing in type '{ endAngle: number; newAng: number; }'.
And in browser's console "d" is undefinded. I was given a solution: moving the datum
to before the .attr('d', arc3)
line. But, if I do this, it doesn't works (the same error occurs), since TypeScript is used.