D3.js ES6 中的饼图补间 - 未捕获的类型错误

Question

我尝试基于 D3.js 和带有动画的 ES6 创建自己的饼图库。

这是我的代码：

class PieChart{

    constructor(element, options) {
        Object.assign(this, Piedefaults, options);
        this.element = element;
        this.init();
    }

    init(){

        const [ innerWidth, innerHeight, innerRadius, outerRadius ] = this.dimensions();
        const createGradient = select => {

            const gradient = select.select('defs').append('linearGradient').attr('id', 'gradient-pie').attr('x1', '0%').attr('y1', '100%').attr('x2', '0%').attr('y2', '0%');
            gradient.append('stop').attr('offset', '0%').attr('style', 'stop-color:#fa6293;stop-opacity:1');
            gradient.append('stop').attr('offset', '100%').attr('style', 'stop-color:#ffa77f;stop-opacity:1');

        }

        const arc = this.arc = d3.arc().innerRadius(innerRadius).outerRadius(outerRadius).startAngle(0).cornerRadius(20);
        const chart = this.chart = d3.select(this.element).append('svg').attr('width', this.width).attr('height', this.height).append('g').attr('transform', `translate(${innerWidth/2}, ${innerHeight/2})`);
        chart.append('defs');
        chart.call(createGradient);

        const background = this.background = chart.append('path').datum({endAngle : Math.PI*2}).attr('class', 'background').attr('d', arc);
        const foreground = this.foreground = chart.append('path').datum({endAngle : 0}).attr('class', 'foreground').attr('fill', 'url(#gradient-pie)').attr('d', arc);

    }

    dimensions() {
        return [this.width, this.height, this.radius, this.radius-this.thickness];
    }

    arcTween(transition, value){

        var newAngle = value * Math.PI / 180;
        console.log("calculated angle is: " + newAngle);

        transition.attrTween('d', function(d) {
            var interpolate = d3.interpolate(d.endAngle, newAngle);
            return function(t) {
                d.endAngle = interpolate(t);
                return this.arc(d);
            };
        });
    }

    renderforeground(data, options){
        console.log("data: " + data);
        this.foreground.transition().duration(750).call(this.arcTween, data);
    }

    render(data, options){
        this.renderforeground(data, options)
    }

    update(data, options){
        this.render(data, options);
    }
}

我的问题是绘制饼图需要一些补间函数来动画饼图，我在 arcTween 方法上得到了这个：

Uncaught TypeError: Cannot read property 'arc' of undefined

而且无法解决问题。感谢任何形式的帮助:)

Answer 1

调用时将this绑定到arcTween方法即可：

this.foreground.transition().duration(750).call(this.arcTween.bind(this), data);

并在 `arcTween' 方法中添加以下行：

let { arc } = this;

这是输出：

arcTween(transition, value) {

    let { arc } = this;

    var newAngle = value * Math.PI / 180;
    console.log("calculated angle is: " + newAngle);

    transition.attrTween('d', function(d) {
        var interpolate = d3.interpolate(d.endAngle, newAngle);
        return function(t) {
            d.endAngle = interpolate(t);
            return arc(d);
        };
    });
}

renderforeground(data, options){
    console.log("data: " + data);
    this.foreground.transition().duration(750).call(this.arcTween.bind(this), data);
}

D3.js ES6 中的饼图补间 - 未捕获的类型错误

D3.js Pie chart tween in ES6 - Uncaught TypeError

javascript

d3.js

es6-class