D3 二维图表的绘制系列（八）曲线图

上一篇： 堆叠面积图 https://blog.csdn.net/zjw_python/article/details/98214359

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

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

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

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 = {
        lineColor: chart._colors(0),
        margins: {top: 80, left: 80, bottom: 50, right: 80},
        textColor: 'black',
        gridColor: 'gray',
        ShowGridX: [],
        ShowGridY: [20, 40, 60, 80, 100, 120, 140, 160 ,180, 200, 220],
        title: '曲线图',
        pointSize: 5,
        pointColor: 'white',
        hoverColor: 'red',
        animateDuration: 1000
    }

尺度转换，具有X和Y轴

    /* ----------------------------尺度转换------------------------  */
    chart.scaleX = d3.scaleBand()
                    .domain(data.map((d) => d.date))
                    .range([0, chart.getBodyWidth()])
    
    chart.scaleY = d3.scaleLinear()
                    .domain([0, (Math.floor(d3.max(data, (d) => d.money)/10) + 1)*10])
                    .range([chart.getBodyHeight(), 0])

渲染线条，在基础折线图中，两点之间的连线为直线，为了达到画线的动画效果，直接对数据点进行线性插值，然后运用中间帧函数实现，曲线图的画线动画也是这个思路，不过区别在于由于两点之间的点是曲线，因此不能再直接应用线性插值，而是应该使用曲线插值。在D3中插值中，目前只支持B样条曲线的插值，而这种曲线插值并没有经过数据点，不满足我们的需求。三次样条曲线插值的方法有很多，例如有三次自然样条曲线、Hermite样条曲线、Cardinal样条曲线等介绍，我们这里运用Cardinal样条曲线插值法，计算曲线分段函数的系数。

插值算法参照这里修改

//对于给定点集points和张力tension， 进行cardinal样条曲线插值， 返回基于x坐标的插值函数
function cardinalSpline(points, tension){

    const controlPoints = addControlPoints(points);

    const pointsNum = controlPoints.length;
    
    if ( pointsNum < 4) return;

    const m =  getCardinalMatrix(tension);

    return function(x){

        //当x等于控制点的x值时，直接返回对应的控制点坐标
        if (x <= controlPoints[0].x) return [controlPoints[0].x, controlPoints[0].y]; 

        if (x >= controlPoints[pointsNum-1].x) return  [controlPoints[pointsNum-1].x, controlPoints[pointsNum-1].y];

        //遍历控制点，找到x所在区间对应的4个控制点，计算返回相应的插值点
        for (let i=1; i < pointsNum-2; i++){
            if (controlPoints[i].x < x && controlPoints[i+1].x > x){
                return [
                    compute(m, controlPoints[i-1].x, controlPoints[i].x, controlPoints[i+1].x, controlPoints[i+2].x, (x-controlPoints[i].x)/(controlPoints[i+1].x-controlPoints[i].x)),
                    compute(m, controlPoints[i-1].y, controlPoints[i].y, controlPoints[i+1].y, controlPoints[i+2].y, (x-controlPoints[i].x)/(controlPoints[i+1].x-controlPoints[i].x)),
                ]
            }else if (controlPoints[i+1].x === x){
                return [x, controlPoints[i+1].y];
            }
        }
    }

}

//返回m矩阵
function getCardinalMatrix(t){
    return [
        -t, 2-t, t-2, t,
        2*t, t-3, 3-2*t, -t,
        -t, 0, t, 0,
        0, 1, 0, 0
    ]
}

//计算x分量或y分量
function compute(m, p0, p1, p2, p3, u){
    const a = m[0]*p0 + m[1]*p1 + m[2]*p2 + m[3]*p3;
    const b = m[4]*p0 + m[5]*p1 + m[6]*p2 + m[7]*p3;
    const c = m[8]*p0 + m[9]*p1 + m[10]*p2 + m[11]*p3;
    const d = m[12]*p0 + m[13]*p1 + m[14]*p2 + m[15]*p3;

    return a*Math.pow(u,3) + b*Math.pow(u,2) + c*u + d; //三次曲线函数
}

//左右各增加两个虚拟的控制点，保证控制点数量大于等于4
function addControlPoints(points){
    const newPoints = []

    points.forEach((point) => {
        newPoints.push(point);
    })

    newPoints.unshift(points[0]);
    newPoints.push(points[points.length-1]);

    return newPoints;
}

export default cardinalSpline;

有了插值算法后，曲线图和基础折线图就几乎没有什么差别了

/* ----------------------------渲染线条------------------------  */
    chart.renderLines = function(){

        let lines = chart.body().selectAll('.line')
                    .data([data]);

            lines.enter()
                    .append('path')
                    .classed('line', true)
                .merge(lines)
                    .attr('fill', 'none')
                    .attr('stroke', config.lineColor)
                    .attr('transform', 'translate(' + chart.scaleX.bandwidth()/2 +',0)')
                    .transition().duration(config.animateDuration)
                    .attrTween('d', lineTween);
            
            lines.exit()
                    .remove();
            
            //中间帧函数
            function lineTween(){
                const generateLine = d3.line()
                                        .x((d) => d[0])
                                        .y((d) => d[1])
                                        .curve(d3.curveCardinal.tension(0.5));

                const inputPoints = data.map((d) => ({x: chart.scaleX(d.date), y: chart.scaleY(d.money)}));

                const interpolate = getInterpolate(inputPoints);    //根据输入点集获取对应的插值函数            
                
                const outputPonits = []

                return function(t){
                    outputPonits.push(interpolate(t));
                    return generateLine(outputPonits);
                }
            }

            //点插值
            function getInterpolate(points){

                const domain = d3.range(0, 1, 1/(points.length-1));
                domain.push(1);

                const carInterpolate = cardinalSpline(points, 0.5);

                const scaleTtoX = d3.scaleLinear()   //时间t与x坐标的对应关系
                                        .domain(domain)
                                        .range(points.map((item) => item.x));

                return function(t){
                    return carInterpolate(scaleTtoX(t));
                }

            }
    }

线画好后，就是添加数据圆点、坐标轴和文本标签等，一样的老套路

/* ----------------------------渲染点------------------------  */
    chart.renderPonits = function(){
        let ponits = chart.body().selectAll('.point')
                    .data(data);
            
            ponits.enter()
                    .append('circle')
                    .classed('point', true)
                .merge(ponits)
                    .attr('cx', (d) => chart.scaleX(d.date))
                    .attr('cy', (d) => chart.scaleY(d.money))
                    .attr('r', 0)
                    .attr('fill', config.pointColor)
                    .attr('stroke', config.lineColor)
                    .attr('transform', 'translate(' + chart.scaleX.bandwidth()/2 +',0)')
                    .transition().duration(config.animateDuration)
                    .attr('r', config.pointSize);
    }

    /* ----------------------------渲染坐标轴------------------------  */
    chart.renderX = function(){
        chart.svg().insert('g','.body')
                .attr('transform', 'translate(' + chart.bodyX() + ',' + (chart.bodyY() + chart.getBodyHeight()) + ')')
                .attr('class', 'xAxis')
                .call(d3.axisBottom(chart.scaleX));
    }

    chart.renderY = function(){
        chart.svg().insert('g','.body')
                .attr('transform', 'translate(' + chart.bodyX() + ',' + chart.bodyY() + ')')
                .attr('class', 'yAxis')
                .call(d3.axisLeft(chart.scaleY));
    }

    chart.renderAxis = function(){
        chart.renderX();
        chart.renderY();
    }

    /* ----------------------------渲染文本标签------------------------  */
    chart.renderText = function(){
        d3.select('.xAxis').append('text')
                            .attr('class', 'axisText')
                            .attr('x', chart.getBodyWidth())
                            .attr('y', 0)
                            .attr('fill', config.textColor)
                            .attr('dy', 30)
                            .text('日期');

        d3.select('.yAxis').append('text')
                            .attr('class', 'axisText')
                            .attr('x', 0)
                            .attr('y', 0)
                            .attr('fill', config.textColor)
                            .attr('transform', 'rotate(-90)')
                            .attr('dy', -40)
                            .attr('text-anchor','end')
                            .text('每日收入（元）');
    }

    /* ----------------------------渲染网格线------------------------  */
    chart.renderGrid = function(){
        d3.selectAll('.yAxis .tick')
            .each(function(d, i){
                if (config.ShowGridY.indexOf(d) > -1){
                    d3.select(this).append('line')
                        .attr('class','grid')
                        .attr('stroke', config.gridColor)
                        .attr('x1', 0)
                        .attr('y1', 0)
                        .attr('x2', chart.getBodyWidth())
                        .attr('y2', 0);
                }
            });

        d3.selectAll('.xAxis .tick')
            .each(function(d, i){
                if (config.ShowGridX.indexOf(d) > -1){
                    d3.select(this).append('line')
                        .attr('class','grid')
                        .attr('stroke', config.gridColor)
                        .attr('x1', 0)
                        .attr('y1', 0)
                        .attr('x2', 0)
                        .attr('y2', -chart.getBodyHeight());
                }
            });
    }

最后绑定鼠标交互事件

/* ----------------------------绑定鼠标交互事件------------------------  */
    chart.addMouseOn = function(){
        //防抖函数
        function debounce(fn, time){
            let timeId = null;
            return function(){
                const context = this;
                const event = d3.event;
                timeId && clearTimeout(timeId)
                timeId = setTimeout(function(){
                    d3.event = event;
                    fn.apply(context, arguments);
                }, time);
            }
        }

        d3.selectAll('.point')
            .on('mouseover', function(d){
                const e = d3.event;
                const position = d3.mouse(chart.svg().node());
                e.target.style.cursor = 'hand'

                d3.select(e.target)
                    .attr('fill', config.hoverColor);
                
                chart.svg()
                    .append('text')
                    .classed('tip', true)
                    .attr('x', position[0]+5)
                    .attr('y', position[1])
                    .attr('fill', config.textColor)
                    .text('收入：' + d.money);
            })
            .on('mouseleave', function(){
                const e = d3.event;
                
                d3.select(e.target)
                    .attr('fill', config.pointColor);
                    
                d3.select('.tip').remove();
            })
            .on('mousemove', debounce(function(){
                    const position = d3.mouse(chart.svg().node());
                    d3.select('.tip')
                    .attr('x', position[0]+5)
                    .attr('y', position[1]-5);
                }, 6)
            );
    }

大功告成！！！