今天来看看d3.js中的雷达图,在网上也看到很多绘制雷达图的,但大部分是用多边形去绘制,通过找到每个点的位置,然后绘制一个path,放在polygon中,当然也是可以,不过我觉得不太优雅,因为d3.js中有一个lineRadial就是专门用来绘制这种极坐标的:

绘制极坐标轴

雷达图中的坐标轴不同于其他的二维坐标轴,它没有现成的方法去调用绘制,只能自己去绘制,而且纬度不同,绘制出来也不一样。

这里主要用d3.lineRadial,它是用来绘制极坐标的(从12点钟方向绘制角度和半径),用法上它接受一个angle作为角度,radius作为半径。这里的angle比较简单,就是把2*Math.PI均分多少分,这里主要看你绘制的雷达图的纬度是多少;radius半径则是递增的:

background Layer 1 半径递增 每个角度=2*Math.PI/5

这里一个比较有用的是d3.range(0, 2 * Math.PI, 2 * Math.PI / axi_circle_point_num)方法,d3.range是一个可以分段的方法,接受(start,end,step),例如(0,10,2),就表示从0到10,每次前进2步,得到[0,2,4,6,8,10]。用在这里表示从0度到360度,每次前进2 * Math.PI / axi_circle_point_num度,例如分成5份,那么每份就是2 * Math.PI / 5度。

上面代码中的for是绘制几个圈,里面的代码可以绘制一个完整的圈圈。

除了绘制圈圈,还要绘制轴(那个贯穿圈圈的线),同样按照上面的思路,不过线条用polygon去绘制:

绘制文字

文字的绘制主要逻辑和绘制极坐标轴的思路很像,只不过文字是需要用transfrom将文字的位置设置到外层那里:

需要额外处理的是如何让文字看起来位置比较正常:

background Layer 1 a b c d e f g h a b c d e f g h 0 Math.PI/2 Math.PI Math.PI*3/2 text-anchor:end text-anchor:middle 图1 图2

上图1中是没有修饰文字位置的状态,我们可以看到有些文字陷入了图片内部,不美观。因此我们分析文字的放置方向,将360分成几个部分,其中(Math.PI/2,Math.PI*3/2)区间设置text-anchor:end,Math.PI/2,Math.PI*3/2的位置设置text-anchor:middle。还要根据角度是适当修饰文字的位置。

绘制图形和点

要将数据绘制到极坐标上,需要设置一个比例尺。例如数据体的范围是[0,100],但是极坐标轴的范围为[0,160],那么就需要将[0,100]映射到[0,160]上,否则直接放到极坐标上可能过小或者过大。

上面还有一个很重要的问题,就是绘制出来的图形和点的位置可能对应不上。

background Layer 1 lineRadial起点 顺时针 关键点绘制起点 顺时针

因为图形是用lineRadial绘制的,而lineRadial的起点是12点钟方向,但是关键点是利用r*cos(a),r*sin(a)计算的,因此起点是水平位置。因此需要将lineRadial绘制的图形顺时针旋转90度。

其他文章

0
我要评论

评论

返回
×

我要评论

回复:

昵称:(昵称不超过20个字)

图片:

提交
还可以输入500个字