Why “d” is undefined in attrTween (d3.js+TypeScript)?

401 views Asked by At

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.

0

There are 0 answers