序

然后简单介绍一下D3.js，这是一个基于数据操作文档的JavaScript库。D3通过使用HTML、SVG和CSS帮助你给你的数据带来活力。D3重视Web标准，为你提供现代浏览器的所有功能，而不是给你一个专有的框架。结合强大的可视化组件和数据驱动的Dom操作。这里还可以看到，它使用SVG来呈现图表，所以使用D3.js需要一定的SVG基础。

在本文中，我们仍然建立了一个简单的绘图框架，并添加了SVG画布。这里类似于饼图。为了方便以后绘图，我们将结合这些元素的G元素移动到画布的中心：

！doctype html lang=' en ' head meta charset=' utf-8 ' title雷达图/title style . container { margin : 30px auto；宽度： 600 px；height: 300pxborder: 1px固体# 000；}/style/head body div class=' container ' SVG width=' 100% ' height=' 100% '/SVG/div script src=' http :http://d3js . org/D3 . v3 . min . js ' charset=' utf-8 '/script script window . onload=function(){ var width=600，height=300//创建一个组来组合要绘制的图表元素：var main=d3.select('。containers VG’)。追加(' g ')。已分类(' main '，true)。attr ('transform '，' translate '(' width/2 '，' height/2 '))}；函数GetColor(idx){ var palette=[' # 2e C7 c 9 '，' #b6a2de '，' #5ab1ef '，' #ffb980 '，' #d87a80 '，' #8d98b3 '，' #e5cf0d '，' #97b552 '，' #95706d '，' #dc69aa '，' #07a2a4 '，' #9a7fd1 '，' #588dd5 '，' # f55}/script/body/html为什么我在这里说雷达图和饼图有些相似？看下图。

可以看到，雷达图的网格轴(蓝色部分)是由多个正多边形组成的，正多边形的绘制可以利用圆半径的特性进行绘制，方便从一开始就把绘制的原点移到画布的中心。

模拟数据

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

Var data={fieldNames: ['中文'，'数学'，'外语'，'物理'，'化学'，'生物'，'政治'，'历史']，Values : [[10，20，30，40，50，60，60]计算网格轴坐标并绘制它们

在以前其他图表的实现中，有像比例或布局这样的东西来方便我们转换数据。雷达图也有这样的工具功能吗？答案是否定的！不要。不要。重要的事情说三遍！(-_-)所以，我们只能开动脑筋，算了。

//设置一些便于计算的常量var radius=100，//指标个数，即fieldNames的长度total=8，//需要把网格轴分成几个层次，即网格轴上有多少个正多边形level=4从小到大，//网格轴的范围，类似于坐标轴rangemin=0，rangemax=100，arc=2 * math . pi .//每个指标的角度var one piece=arc/total；//计算网格轴var多边形的正多边形的坐标={webs: []，web points 3360[]}；for(var k=级别；k0；k-){ var web=' '，webPoints=[]；var r=半径/水平* k；for(var I=0；itotali ) { var x=r * Math.sin(i * onePiece)，y=r * math . cos(I * one piece)；webs=x '，' y '；webPoints.push({ x: x，y :y })；}多边形. web . push(web)；多边形.网络点.推送(网络点)；}计算网格轴的坐标就是计算一个多边形各点的坐标。为了方便以后添加多边形元素时的绘制(点属性的赋值)，我们需要在寻找点的坐标时顺便将它们拼成字符串。在上述代码的for循环中，外部循环表示多边形，内部循环表示多边形上的点。多边形之间的区别只在于它们外圆的半径，而同一多边形的点之间的区别在于它们的角度不同。点的坐标是通过半径乘以角度的正弦或余弦得到的。

得到计算的坐标后，我们开始添加网格轴。

//绘制网格轴varweb=main . append(' g ')。分类(‘网’，真的)；网。选择全部(“多边形”)。数据(多边形. web)。输入()。追加('多边形')。attr('points '，函数(d){ return d；});添加一个g元素来组合代表网格轴的所有元素，选择多边形元素并绑定多边形。web数组，输入()和append()来添加一个新的多边形元素并复制points属性。完成了前面文章反复练习的这一系列操作后，为了让网轴更加明显，我们给它增加了一点风格。web多边形{ fill:白色；fill-opa city 3360 0.5；stroke:灰色；中风-dash array : 10 5；}我们得到了如下图所示的网格轴。

添加垂直轴

然后我们加上垂直轴。垂直轴是一条添加了根的线，用于连接中心点和最外面多边形上的点。所需数据可以从多边形获取。

//添加垂直轴var line=main . append(' g ')。分类('线'，真)；线条。选择全部(“线条”)。数据(多边形.网络点[0])。输入()。追加('行')。attr('x1 '，0)。attr('y1 '，0)。attr('x2 '，函数(d){ return d . x；}) .attr('y2 '，函数(d){ return d . y；});雷达图的坐标轴部分完成。

计算雷达图面积并相加

雷达图区域也是多边形，只是一个不规则的多边形。然而，他的几个点总是在纵轴上，这些点在纵轴上的位置可以通过这些点在纵轴上所代表的值的比例来计算。

//计算雷达图var areasData的坐标data=[]；var值=data.valuesfor(var I=0；ivalues.lengthi ) { var值=values[i]，面积=' '，点数=[]；for(var k=0；ktotalk ) { var r=半径*(值[k]-range min)/(range max-range min)；var x=r * Math.sin(k * onePiece)，y=r * math . cos(k * one piece)；面积=x '，' y '；points.push({ x: x，y :y })} areas data . push({ polygon : area，points 3360 points })；}计算完点的坐标后，我们可以添加雷达图区域。为了让雷达图更令人印象深刻，我们不仅添加了多边形来表示雷达图区域，还在每个纵轴上标记了多边形的点。

//添加g组以包括所有雷达图区域var area=main . append(' g ')。分类('区域'，真)；//添加g组以包含雷达图区域和点区域下的多边形。全选(' g ')。数据(区域数据)。输入()。追加(' g ')。attr ('class '，function (d，I){ return ' area '(I ^ 1)；});for(var I=0；iareasData.lengthI) {//循环每个雷达图区域var area=areas.select('。面积'(I ^ 1))，面积数据=面积数据[I]依次为；//绘制多边形区域。追加('多边形')。attr('点'，areadata。多边形)。attr ('stroke '，function (d，index){ return getcolor(I)；}) .attr('fill '，函数(d，index){ return GetColor(I)；});//点var圆=面积。追加(' g ')。在雷达图区域下分类(‘圆’，真)；圆圈。选择全部(“圆圈”)。数据(区域数据点)。输入()。追加('圆圈')。attr('cx '，函数(d){ return d . x；}) .attr('cy '，函数(d){ return d . y；}) .attr('r '，3)。attr('stroke '，function(d，index){ return GetColor(I)；});}这里，为了体验层次关系，我用区域来覆盖所有雷达图区域，用一个G组来表示一个雷达图区域，这个区域包含了组成这个区域的多边形和点。这里，因为我们的数据由雷达图区域表示，这个for循环将只循环一次。向绘制区域添加样式。面积多边形{ fill-opa city 3360 0.5；笔画宽度： 3；}.区域圆圈{ fill:白色；笔画宽度： 3；}所以我得到了下面的图表。

计算文本标签坐标并添加

为了使上面的图表更加完整，我们在上面放了一个文本标签。文本标签标记在网格的外围，因此文本标签的坐标可以通过与网格的多边形点的坐标相同的原理来计算。

//计算文本标签坐标var textPoints=[]；var textRadius=半径20；for(var I=0；itotalI){ var x=text radius * math . sin(I * one piece)，y=text radius * math . cos(I * one piece)；textPoints.push({ x: x，y :y })；}在将坐标添加到画布之前，请计算坐标。

//绘制文本标签vartextures=main.append ('g ')。分类(“纹理”，真)；texts.selectAll('text ')。数据(文本点)。输入()。追加('文本')。attr('x '，函数(d){ return d . x；}) .attr('y '，函数(d){ return d . y；}) .text(函数(d，I){ return data . field name[I]；});最后的样子是这样的。

摘要

以上就是D3.js实现雷达的全部内容，希望本文对大家的学习和工作有所帮助。有问题可以留言交流。感兴趣的朋友，请继续关注我们。