我使用d3
渲染圆环图组件。下面是渲染代码。问题是转换后没有调用arcTween
回调。我使用_current
作为更新此组件数据的中间值。
const pie = d3
.pie()
.sort(null)
.value(d => {
return d.dataPerc;
});
const arcTween = d => {
const i = d3.interpolate(this._current, d);
this._current = i(0);
return t => {
return arc(i(t));
};
};
if (this.dataset.length <= 0) {
return;
}
const data1 = pie(this.dataset[0]);
this.path = this.path.data(data1);
const that = this;
this.path
.enter()
.append('path')
.each(d => {
this._current = {
startAngle: d.endAngle,
endAngle: d.endAngle,
};
})
.style('fill', d => {
return d.data.color;
})
this.path
.exit()
.datum(d => {
return {
startAngle: d.endAngle,
endAngle: d.endAngle,
};
})
.transition()
.duration(1000)
.attrTween('d', arcTween)
.remove();
this.path
.transition()
.duration(1000)
.attrTween('d', arcTween);