Когда вы делаете это ...
.attr('d', arc3)
... второй аргумент attr
, который является функцией arc3
, получает переданный связанный элемент, индекс и группу узла ,
Однако нет привязанной привязки, поскольку в вашем коде метод datum
приходит после .
Самое простое решение - просто переместить datum
в перед строкой .attr('d', arc3)
:
var svg = d3.select("svg");
var arc3 = d3.arc().innerRadius(77).outerRadius(90).startAngle(0);
var foregroundArc3 = svg
.append('path')
.datum({
endAngle: 0.0628 * 90,
newAngle: 0.0628 * 270
})
.attr('d', arc3)
.attr('fill', 'teal')
.style('fill-opacity', 0.5)
.attr('transform', 'translate(' + (146.5) + ',' + (150.9) + ')')
.transition()
.duration(1500)
.attrTween('d', (d) => {
return (t) => {
const interpolate = d3.interpolate(d.endAngle, d.newAngle);
d.endAngle = interpolate(t);
return arc3(d);
};
});
<svg></svg>
<script src="https://d3js.org/d3.v5.min.js"></script>