入门-初学使用d3.js完成折线图与曲线图
上一节我们简单的完成了一个柱状图的构造,今天继续学习d3.js,今天的目标是完成一个折线图和一个曲线图,曲线图只不过是在完成曲线图后在添加一个
.interpolate("cardinal")
属性就可以了。
先学习一点新知识
在学习柱状图的的时候我们学习几个获取元素与绑定数据的方法,如不知道的可以看我之前的写的柱状图文章
今天完成折线图也会有几个新的方法:
-
,d3.js的V4.?.?以上的版本可以写成d3.scale.linear().domain().range()
,scale我们暂且叫它“比例”吧,而scaleLinear,我们称它为“线性比例尺”。d3.scaleLinear().domain().range()
是定义域,就是坐标系下的值(输入范围)domain()
是值域,就是映射到svg画布上的值 (输出范围)range()
- 设置样式的方法:
设置填充的颜色,none 不填充颜色。fill
设置线条的颜色stroke
设置线条的宽度stroke-width
完成折线图主要就需要这几个方法,现在我们看代码是如何实现的。
代码实现
首先我们先定一个盒子来装我们要做的折线图,并设置一部分样式,代码如下:
#container{
background: #ddd;
width: 500px;
height: 250px;
}
然后我们给这个盒子里添加一个svg画布,代码如下:
d3.select("#container")
.append("svg")
.attr("width",500)//这里不用加单位
.attr("height",250)
在在这个svg画布中创建一个
g
等会来显示我们的折线图,并给它设置一定的偏移量,在这里获取的svg画布必须是实际存在的:代码如下
var g=d3.select("svg")//实际存在的
.append("g")
.attr("transform","translate(50,30)")
我们看下网页中是如何显示的:
如图,我们已经给盒子里添加上了svg画布,和即将承接折线图的
g
接下来我们就要定义一些数据并让这些数据显示在画布上,代码如下:
var data=[1,2,1,2,1,2]
var line_generator=d3.svg.line()
.x(function(d,i){return scale_x(i)})//0,1,2。。。
.y(function(d){return scale_y(d)})//1,2,1,2。。。
d3.select("g")
.append("path")
.attr("d",line_generator(data))
可能这段代码不好理解,我们来先看下在网页中是怎么显示的:
注意看箭头部分,
M0,1L1,2L2,1L3,2L4,1L5,2
这段代码的意思是:起点是0,第一个显示的是1,第二个显示的是2,第三个显示的是1 。。。,而“L”的的意思是这些点用直线链接起来。我们要生成这样一串代码就需要我么上面定义
line_generator
这个函数来把
data
转换成这种格式。
此时实际我们的折线图已经完成了,如图:
大家可看到就像一个不规则的污渍一样,这是什么鬼哟,可能你会想,你这个糟老头子坏的很,骗人。为什么会是这个样子的呢?因为我们设置的数据比较小,所以接下来我们要做的就是让折线图在
g
里等比例放大,大家看代码:
对代码进行了一个重构:
var width=500;
var height=250;
var margin = { top: 30, right: 20, bottom: 20, left: 50 },
g_width = width - margin.left - margin.right,
g_height = height - margin.top - margin.bottom;
//以上代码的意思是:定义变量来表示画布的宽度,给g设置了偏移量,然后准确的求出g的高度和宽度。
d3.select("#container")
.append("svg")
.attr("width",width)
.attr("height",height)
var g=d3.select("svg")//实际存在的
.append("g")
.attr("transform","translate(50,30)")
var data=[1,2,1,2,1,2]
var scale_x= d3.scale//X轴等比例放大函数
.linear()
.domain([0,data.length-1])
.range([0,g_width]);
var scale_y= d3.scale//Y轴等比例放大函数
.linear()
.domain([0,d3.max(data)])//d3.max()获取数据的最大值
.range([0,g_height]);
var line_generator=d3.svg.line()
.x(function(d,i){return scale_x(i)})
.y(function(d){return scale_y(d)})
.interpolate("cardinal")
d3.select("g")
.append("path")
.attr("d",line_generator(data))
这样我们的折线图就完成了:
这又是什么鬼,这是因为我们的折线图默认填充了,我们需要给它设置一定的样式,代码如下:
path{
fill: none;
stroke: aquamarine;
stroke-width: 2;
}
此时我们的折线图真的就已经完成了:
如图,可能大家会疑问这显示的不太正确吧,那是因为在d3.js中X轴是水平向右的,Y轴是垂直向下的,知识点要考的。那如果我们要一个曲线图应该怎么办呢,只要在
line_generator
方法下添加一个方法即可。
var line_generator=d3.svg.line()
.x(function(d,i){return scale_x(i)})
.y(function(d){return scale_y(d)})
.interpolate("cardinal")
效果如图:
好了此时我们的折线图,曲线图已经全部完成了。对于D3.js我也是初次接触,学一点分享一点,有些地方说的不是很清楚,还请见谅。欢迎各路大神批评指正。