入門-初學使用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

   設定線條的寬度

完成折線圖主要就需要這幾個方法，現在我們看代碼是如何實作的。

代碼實作

首先我們先定一個盒子來裝我們要做的折線圖,并設定一部分樣式，代碼如下：

#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我也是初次接觸，學一點分享一點，有些地方說的不是很清楚，還請見諒。歡迎各路大神批評指正。