D3 二维图表的绘制系列（十五）雷达图

上一篇： 气泡图 https://blog.youkuaiyun.com/zjw_python/article/details/98485368

下一篇： 矩形树状图 https://blog.youkuaiyun.com/zjw_python/article/details/98489369

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

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

1 图表效果

2 数据

subject,person1,person2
语文,80,70
数学,95,85
英语,62,80
物理,50,60
化学,70,65
生物,85,40

3 关键代码

导入数据

d3.csv('./data.csv', function(d){
   
    return {
   
        subject: d.subject,
        person1: +d.person1,
        person2: +d.person2
    };
}).then(function(data){
   
....

一些样式参数配置，例如雷达图背景网格层数，填充颜色等

const config = {
   
        margins: {
   top: 80, left: 80, bottom: 50, right: 80},
        textColor: 'black',
        title: '基本雷达图',
        radius: 110,
        animateDuration: 1000,
        tickNum: 5,
        axisfillColor: ['white','#ddd'],
        axisStrokeColor: 'gray',
        pointsColor: 'white',
        pointsSize: 3
    }

尺度转换，雷达图是正多边形，我们可以以其外接圆的半径作为尺度进行映射

/* ----------------------------尺度转换------------------------  */
    chart.scaleRadius = d3.scaleLinear()
                            .domain([0, 100])
                            .range([0, config.radius])

首先渲染雷达图的坐标轴，也就是多个嵌套的正多边形背景，这里运用三角函数计算多边形的顶点，并使用polygon元素进行渲染

/* ----------------------------渲染坐标轴------------------------  */
    chart.renderAxes = function(){
   

        // ----渲染背景多边形-----
        const points = getPolygonPoints(data.length, config.radius, config.tickNum);

        const axes = chart.body().append('g')
                                .attr('class', 'axes')
                                .attr('transform', 'translate(' + chart.getBodyWidth()/2 + ',' + chart.getBodyHeight()/2 + ')')
                                .selectAll('axis')
                                .data(points);
            
              axes.enter()
                    .append('polygon')
                    .attr('class', 'axis')
                  .merge(axes)
                    .attr('points', (d) => d)
                    .attr('fill', (d,i) => i%2 === 0?config.axisfillColor[0]:config.axisfi