利用D3.js绘制雷达图

d3.js绘制雷达图，如果各个指标维度的比例尺一致，相对容易，主要难点在于多个维度的比例尺不统一的情况下，如何绘制？
（1）各个指标维度比例尺一致，比如一个人多门功课的成绩雷达图，通过设置一个统一的domain=【0, 100】，range=【0, radius】，做好映射即可。如下图所示：

image.png

（2）各个指标维度比例尺不一致，比如一个人的体温、身高、体重、心率、视力等维度，如果按照同一比例尺来绘制，可想而知，某些指标维度无法很好展现出来。目前解决办法是：固定domain=【0, radius】，然后将各个维度数据进行转换换算到【0, radius】范围内的数值。如下：

// 定义x轴
    let x = d3
      .scaleBand()
      .range([0, 2 * Math.PI])
      .align(0)
    // 定义y轴
    let y = d3.scaleLinear().range([0, outerRadius]).domain([0, outerRadius])
    let z = d3.scaleOrdinal(d3.schemeCategory10) // 通用线条的颜色

// 数据转换方法
    let zoom= 0.1
   // 将value处理成统一比例尺范围内的数值
    const getConvertValue = function (value, min, max, radius) {
      let newMin = min - (max - min) * zoom
      let newMax = max + (max - min) * zoom
      return (value - newMin) * (radius/ (newMax - newMin))
    }

（3）如何在雷达图中绘制一个环形范围。例如需要在一个人的各项指标定义一个最高值和最低值组成的一个环形范围，这里主要通过areaRadial来绘制，定义innerRadius和outerRadius即可形成一个环状范围，如下：

let data = [
{key: 'weight', min: 70, max: 200, areaMin: 80, areaMax: 180},
{key: 'temperature', min: 35, max: 45, areaMin: 35.1, areaMax: 39.9},
...
]
let area = d3.areaRadial()
      .curve(d3.curveLinearClosed)
      .angle(
        d => {
          return x(d.key)
        }
      )
    // 环状范围
  g.append('path')
      .attr('class', 'area_1')
      .attr('fill', 'rgb(255,127,14)')
      .attr('fill-opacity', 0.4)
      .attr('d', area
        .innerRadius(
          d => {
            d.transHuanMin = getConvertValue(d['areaMin'], d['min'], d['max'], outerRadius)
            return y(d.transHuanMin)
          }
        )
        .outerRadius(
          d => {
            d.transHuanMax = getConvertValue(d['areaMax'], d['min'], d['max'], outerRadius)
            return y(d.transHuanMax)
          }
        )(data))

如下图所示：

image.png