D3 二维图表的绘制系列（二十一）仪表盘图

上一篇：河流图 https://blog.youkuaiyun.com/zjw_python/article/details/98592543

下一篇：桑基图 https://blog.youkuaiyun.com/zjw_python/article/details/98611559

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

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

1 图表效果

在这里插入图片描述

2 数据

仪表盘图的数据很简单，就是一个值，其被包含到config配置中了，没有单独的数据文件

3 关键代码

一些样式配置、数值的范围、仪表盘的弧度分段等

const config = {
   
   
    margins: {
   
   top: 80, left: 80, bottom: 50, right: 80},
    textColor: 'black',
    title: '仪表盘',
    totalAngle: 270,
    totalValue: 100,
    showValue: 90,
    width: 25,
    domain: [0, 20, 80, 100],
    lineColor: 'white',
    animateDuration: 500
}

尺度转换，根据画布大小计算仪表盘的宽度

/* ----------------------------计算半径-----------------------------  */

const radius = d3.min([chart.getBodyWidth()*0.95, chart.getBodyHeight()*0.95])/2;

渲染仪表盘轮廓，总体上就是一个具有内半径的大角度扇形，计算一下角度，用arc渲染即可

/* ----------------------------渲染弧形仪表盘轮廓------------------------  */
chart.renderSlices = function(){
   
   
    const drawAngles = config.domain.map((value, i, domain) => {
   
   
        const angle = value / config.totalValue * config.totalAngle;
        if (i !== domain.length-1){
   
   
            return {
   
   
                startAngle: (angle - config.totalAngle/2) * Math.PI/180,
                endAngle: (domain[i+1] / config.totalValue * config.totalAngle - config.totalAngle/2) * Math.PI/180
            }
        }
    });

    drawAngles.pop();

    const arc = d3.arc()