为了账号安全,请及时绑定邮箱和手机立即绑定

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

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

浮云间 2021-06-16 09:29:22
我尝试使用动画创建基于 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方法:未捕获的类型错误:无法读取未定义的属性“弧”并且无法解决问题。任何形式的帮助表示赞赏:)
查看完整描述

1 回答

  • 1 回答
  • 0 关注
  • 191 浏览
慕课专栏
更多

添加回答

举报

0/150
提交
取消
意见反馈 帮助中心 APP下载
官方微信