基于 D3.js 的雷达图的实现

  基本图表一共有六种，分别是柱状图、折线图、散点图、气泡图、饼图和雷达图。前面五种图形都已经介绍过如何实现了，今天我们一起来看看最后的雷达图。

  依然是先把简单的画图框架搭起来，添加SVG画布。这里和饼图有点类似，为了方便后面的绘制，我们把组合这些元素的g元素移动到画布的中心：

    
        
        雷达图
        
            .container {
                margin: 30px auto;
                width: 600px;
                height: 300px;
                border: 1px solid #000;
            }

        
    
    
        

            
        
        
        
    

  这里为什么我会说雷达图和饼图会有点类似呢？看一下下面这张图。

  可以看到，雷达图的网轴（蓝色部分）是由多个正多边形所组成的，而正多边形的绘制正好是可以利用圆半径的特性来绘制的，所以从一开始把绘制的原点移动到画布的中心是很方便后面的绘制工作的。

模拟数据

  我们先模拟一些原始数据。

var data = {
    fieldNames: ['语文','数学','外语','物理','化学','生物','政治','历史'],
    values: [
        [10,20,30,40,50,60,70,80]
    ]
};

计算网轴坐标并绘制

  在前面的其他图表的实现中，都有比例尺或者布局这样的东西来为我们转化数据提供便利，雷达图是否也存在这样的工具函数呢？答案是没有！没有！没有！重要的事情说三遍！(-_-) 所以，我们只能开动自己的小脑瓜自己算了。

// 设定一些方便计算的常量
var radius = 100,
    // 指标的个数，即fieldNames的长度
    total = 8,
    // 需要将网轴分成几级，即网轴上从小到大有多少个正多边形
    level = 4,
    // 网轴的范围，类似坐标轴
    rangeMin = 0,
    rangeMax = 100,
    arc = 2 * Math.PI;
// 每项指标所在的角度
var onePiece = arc/total;
// 计算网轴的正多边形的坐标
var polygons = {
    webs: [],
    webPoints: []
};
for(var k=level;k>0;k--) {
    var webs = '',
            webPoints = [];
    var r = radius/level * k;
    for(var i=0;i

  计算网轴的坐标就是计算一个个多边形的各点坐标，为了后面添加polygon元素时方便绘制（points属性的赋值），我们需要在求点坐标的时候顺便把它们拼成字符串。上述代码的for循环中，外层循环代表一个多边形，内层循环代表多边形上的点，多边形与多边形之间差异仅仅在于它们的外圆的半径不同，而同一多边形的点与点之间的差异在于它们的角度不同。点的坐标由半径乘以角度的正弦或者余弦来求得。
  得到了计算好的坐标以后，我们就开始添加网轴。

// 绘制网轴
var webs = main.append('g')
        .classed('webs', true);
webs.selectAll('polygon')
        .data(polygons.webs)
        .enter()
        .append('polygon')
        .attr('points', function(d) {
            return d;
        });

.webs polygon {
    fill: white;
    fill-opacity: 0.5;
    stroke: gray;
    stroke-dasharray: 10 5;
}  

// 添加纵轴
var lines = main.append('g')
        .classed('lines', true);
lines.selectAll('line')
        .data(polygons.webPoints[0])
        .enter()
        .append('line')
        .attr('x1', 0)
        .attr('y1', 0)
        .attr('x2', function(d) {
            return d.x;
        })
        .attr('y2', function(d) {
            return d.y;
        });

// 计算雷达图表的坐标
var areasData = [];
var values = data.values;
for(var i=0;i

// 添加g分组包含所有雷达图区域
var areas = main.append('g')
    .classed('areas', true);
// 添加g分组用来包含一个雷达图区域下的多边形以及圆点 
areas.selectAll('g')
    .data(areasData)
    .enter()
    .append('g')
    .attr('class',function(d, i) {
        return 'area' + (i+1);
    });
for(var i=0;i

.areas polygon {
    fill-opacity: 0.5;
    stroke-width: 3;
}
.areas circle {
    fill: white;
    stroke-width: 3;
}

// 计算文字标签坐标
var textPoints = [];
var textRadius = radius + 20;
for(var i=0;i

// 绘制文字标签
var texts = main.append('g')
        .classed('texts', true);
texts.selectAll('text')
        .data(textPoints)
        .enter()
        .append('text')
        .attr('x', function(d) {
            return d.x;
        })
        .attr('y', function(d) {
            return d.y;
        })
        .text(function(d,i) {
            return data.fieldNames[i];
        });