今天来看看一些入门级别的d3绘制的柱状图,折线图,面积图,饼图,让我们可以对d3快速了解下。

柱状图

先来看效果:

1.对于柱状图,首先就是要能够绘制横/纵坐标:

若要绘制坐标,先要得到比例尺,这个在 d3.js中的比例尺中有讲解各种比例尺。横坐标用scaleBand做一个有关序号的比例尺;纵坐标用scaleLinear做一个关于数据内容范围的线性比例尺。

然后让坐标轴和比例尺关联,axisBottom就是制作底部的坐标轴;axisLeft就是制作靠左边的坐标轴。

2.接下来就是绘制柱子,柱子主要设置x,y,width,height来控制柱子具体放哪:

其中enter的用法在: d3.js中update,enter,exit的概念中有介绍,表示获取数据对应的缺失元素,也就是新建元素,和数据对应。

attr设置属性的时候,后面的function里面的两个参数,分别代表当前数据和当前数据下标。

3.给柱子增加动态效果:

上面的transition().duration(1000).delay(function(d,i){return 100*i;}),用来开启动画,其中duration是动画时间,delay是动画延时播放。

注意上面在transition()前后都有一个y,这个是用来做过度效果的,因为如果只有transition后面的一个y,那么柱子是从上往下增长。

4.添加事件:

上面添加了mouseenter,mouseleave两个事件,表示当鼠标移入柱子和移出柱子时候的动作。

折线图

先来看效果:

折线图和柱状图第一步都是一样,先要绘制横/纵坐标轴。

折线图的关键是如何绘制折线:

这里需要用d3.line()新建一个线条管理器,然后将它作为path的d(svg中的path是用d来描述路径位置)。

我们看到demo中的折线是带有一定弧度的,那是因为curve()方法可以设置两点之间的过度,其他的一些设置参数配置:

然后就是绘制圆点:

这个和绘制文字是差不多的,比较简单,只要计算好摆放的位置就好了。

面积图

先来看效果:

面积图大体上和折线图类似,只是需要的d3对象不同:

在折线图中,我们是新建了一个d3.line;在面积图中,则是新建了一个d3.area,然后这里有个y0,y0返回的是面积图的底边(最下边)位置,这样就能把路径“围起来”。

饼图

先来看效果:

1.用d3.pie()将数据转换成带有角度信息的数据:

得到的pieData里有startAngle,endAngle等信息。

2.利用d3.arc()生成圆弧对象:

上面两步基本上可以绘制一个简单的圆饼图,注意上面用到了scaleOrdinal比例尺,用来获取不同的颜色。

3.绘制线条:

这里用polyline来绘制线条,points来表明线条上的点。注意arc.centroid方法,它是用来获取一段圆弧上的中间位置。

注意endPos用来收集最外端的位置,为等会放文字做安排。

4.绘制文字

绘制文字中的位置主要来自刚才收集的endPos,同时还要注意一个问题,就是文字摆放的位置,一般在圆形左边的文字是向左靠;圆形右边的文字是向右靠。因此需要判断一个圆弧是在左边还是右边,也就是middleAngle>Math.PI这个判断。

5.移入/移出,放大/缩小效果

这个主要是结合mouseenter,mouseleave方法,同时创建一个比之前稍微大一点的圆(bigArc),然后移入的时候,用它重新生成了一个稍微大一点的片段;移出的时候又生成之前一样大的片段。

其他文章

0
我要评论

评论

返回
×

我要评论

回复:

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

图片:

提交
还可以输入500个字