D3 二维图表的绘制系列（九）基础饼图

上一篇：曲线图 https://blog.youkuaiyun.com/zjw_python/article/details/98478578

下一篇：环形饼图 https://blog.youkuaiyun.com/zjw_python/article/details/98480632

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

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

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){
.....

一些参数样式配置

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

尺度转换，饼图运用了d3.pie()，其能方便得根据数据计算每个扇形得起始和终止角度

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

直接运用d3.arc渲染扇形。注意，如果我们要扇形具有变化得动画效果时，不能直接应用transition的属性d插值，这样会造成扇形变形，因此我们需要运用中间帧函数，并记录上一次扇形的角度，达到过渡效果

/* ----------------------------渲染扇形------------------------  */
    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));
            }
        }
    }

渲染扇形没有什么难度，比较麻烦的是文本标签的连线。为了美观，文本标签的连线由一条水平线和一条斜线组成，同时，水平线的长度要根据文字标签所在的角度进行相应的缩短和变长，除此之外还要注意文本标签的text-anchor和水平偏移距离，小于180度，要左对齐，大于180度要右对齐

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

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

        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 * 2)
                        .innerRadius(config.innerRadius);

        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));
            })
    }