D3 二维图表的绘制系列（十）环状饼图

本文为博主原创文章，转载请务必附上文章网址，谢谢。

本文链接：https://blog.youkuaiyun.com/zjw_python/article/details/98480632

上一篇：基础饼图 https://blog.youkuaiyun.com/zjw_python/article/details/98479641

下一篇：南丁格尔图 https://blog.youkuaiyun.com/zjw_python/article/details/98480980

代码结构和初始化画布的Chart对象介绍，请先看 https://blog.youkuaiyun.com/zjw_python/article/details/98182540

本图完整的源码地址： https://github.com/zjw666/D3_demo/tree/master/src/pieChart/doughnutChart

1 图表效果

在这里插入图片描述

2 数据

date,money
Mon,120
Tue,200
Wed,150
Thu,80
Fri,70
Sat,110
Sun,130

3 关键代码

导入数据

d3.csv('./data.csv', function(d){
   
    return {
   
        date: d.date,
        money: +d.money
    };
}).then(function(data){
   
....

一些样式参数配置，与基础饼图的差别就是，内半径不为0

const config = {
   
        margins: {
   top: 80, left: 80, bottom: 50, right: 80},
        textColor: 'black',
        title: '环状饼图',
        innerRadius: 60,
        outerRadius: 100,
        textOffsetH: 10,
        lineColor: 'black',
        animateDuration: 1000
    }

尺度转换，和基础饼图一样

/* ----------------------------尺度转换------------------------  */
    chart.arcAngle = d3.pie()
                    .sort((d,i) => i)
                    .value((d) => d.money);

渲染扇形，复用基础饼图的代码

/* ----------------------------渲染扇形------------------------  */
    chart.renderSlices = function(){
   
        const slices = chart.body().append('g')
                            .classed('pie', true)
                            .attr('transform', 'translate(' + chart.getBodyWidth()/2 + ',' + chart.getBodyHeight()/2 + ')')
                            .selectAll('.arc')
                            .data(chart.arcAngle(data));

              slices.enter()
                        .append('path')
                        .