入门-初学使用d3.js完成折线图与曲线图

入门-初学使用d3.js完成折线图与曲线图

上一节我们简单的完成了一个柱状图的构造，今天继续学习d3.js，今天的目标是完成一个折线图和一个曲线图，曲线图只不过是在完成曲线图后在添加一个.interpolate("cardinal")属性就可以了。

先学习一点新知识

在学习柱状图的的时候我们学习几个获取元素与绑定数据的方法，如不知道的可以看我之前的写的柱状图文章

今天完成折线图也会有几个新的方法：

1. d3.scale.linear().domain().range()，d3.js的V4.？.?以上的版本可以写成d3.scaleLinear().domain().range(),scale我们暂且叫它“比例”吧，而scaleLinear，我们称它为“线性比例尺”。
   domain()是定义域，就是坐标系下的值（输入范围）
   range()是值域，就是映射到svg画布上的值 （输出范围）
2. 设置样式的方法：
   fill 设置填充的颜色，none 不填充颜色。
   stroke 设置线条的颜色
   stroke-width 设置线条的宽度

完成折线图主要就需要这几个方法，现在我们看代码是如何实现的。

代码实现

首先我们先定一个盒子来装我们要做的折线图,并设置一部分样式，代码如下：

<div id="container"></div>

#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我也是初次接触，学一点分享一点，有些地方说的不是很清楚，还请见谅。欢迎各路大神批评指正。