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

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

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

代码结构和初始化画布的Chart对象介绍，请先看 https://blog.csdn.net/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')
                        .attr('class', (d,i) => 'arc arc-' + i)
                    .merge(slices)
                        .attr('fill', (d,i) => chart._colors(i))
                        .transition().duration(config.animateDuration)
                        .attrTween("d", arcTween)

              slices.exit()
                        .remove();

        const arc = d3.arc()
                        .outerRadius(config.outerRadius)
                        .innerRadius(config.innerRadius);

        function arcTween(d){
            let currentArc = this._current;

            if (!currentArc){
                currentArc = {startAngle: 0, endAngle: 0};
            }

            const interpolate = d3.interpolate(currentArc, d);
            this._current = interpolate(1);   //当饼图更新时，从当前角度过渡到新角度

            return function(t){
                return arc(interpolate(t));
            }
        }
    }

渲染文本标签及连线，这里注意，由于有扇形内半径了，因此稍微更改一下arc函数的半径设置，其余不变

/* ----------------------------渲染文本标签和线条------------------------  */
    chart.renderText = function(){

        // ----渲染文本标签-------
        const arc = d3.arc()
                        .outerRadius(config.outerRadius + (config.outerRadius-config.innerRadius)*1.2)
                        .innerRadius(config.innerRadius + (config.outerRadius-config.innerRadius)*1.2);

        const scaleTextDx = d3.scaleLinear()
                                .domain([0, Math.PI/2])
                                .range([config.textOffsetH, config.textOffsetH * 3]);

        const labels = d3.select('.pie')
                            .selectAll('.label')
                            .data(chart.arcAngle(data));
            
              labels.enter()
                        .append('text')
                        .classed('label', true)
                    .merge(labels)
                        .attr('stroke', config.textColor)
                        .attr('fill', config.textColor)
                        .attr('text-anchor', (d) => {
                            return (d.endAngle + d.startAngle)/2 > Math.PI ? 'end' : 'start';
                        })
                        .attr('dy', '0.35em')
                        .attr('dx', computeTextDx)
                        .transition().duration(0).delay(config.animateDuration)
                        .attr('transform', (d) => {
                            return 'translate(' + arc.centroid(d) + ')'
                        })
                        .text((d) => d.data.date+': '+d.data.money);

                labels.exit()
                        .remove();

        // ----渲染标签连线------
        const arc1 = d3.arc()
                        .outerRadius(config.outerRadius + (config.outerRadius-config.innerRadius)/2)
                        .innerRadius(config.innerRadius + (config.outerRadius-config.innerRadius)/2);
        
        const points = getLinePoints();

        const generateLine = d3.line()
                                .x((d) => d[0])
                                .y((d) => d[1]);

        const  lines = d3.select('.pie')
                            .selectAll('.line')
                            .data(points);

               lines.enter()
                        .insert('path',':first-child')
                        .classed('line', true)
                    .merge(lines)
                        .transition().duration(0).delay(config.animateDuration)
                        .attr('fill', 'none')
                        .attr('stroke', config.lineColor)
                        .attr('d', generateLine);
                
                lines.exit()
                        .remove();
        
        function computeTextDx(d){
            const middleAngle = (d.endAngle + d.startAngle)/2;
            let dx = ''
            if (middleAngle < Math.PI){
                dx = scaleTextDx(Math.abs(middleAngle - Math.PI/2));
            }else{
                dx = -scaleTextDx(Math.abs(middleAngle - Math.PI*3/2));
            }
            return dx;
        }

        function getLinePoints(){
            return chart.arcAngle(data).map((d) =>{
                const line = [];
                const tempPoint = arc.centroid(d);
                const tempDx = computeTextDx(d);
                const dx = tempDx > 0 ? tempDx - config.textOffsetH : tempDx + config.textOffsetH;
                line.push(arc1.centroid(d));
                line.push(tempPoint);
                line.push([tempPoint[0] + dx, tempPoint[1]]);
                return line;
            })
        }
    }

绑定鼠标交互事件，鼠标悬停时，扇形略微变大

/* ----------------------------绑定鼠标交互事件------------------------  */
    chart.addMouseOn = function(){

        const arcLarger = d3.arc()
                            .outerRadius(config.outerRadius * 1.1)
                            .innerRadius(config.innerRadius);
        
        const arcNormal = d3.arc()
                            .outerRadius(config.outerRadius)
                            .innerRadius(config.innerRadius);

        d3.selectAll('.arc')
            .on('mouseover', function(d){
                const e = d3.event;

                d3.select(e.target)
                    .attr('d', arcLarger(d));
            })
            .on('mouseleave', function(d){
                const e = d3.event;

                d3.select(e.target)
                    .attr('d', arcNormal(d));
            })
    }

大功告成！！！