d3學習day1----畫曲線

d3畫布的基本佈局以下圖

實現過程以下：

先定義畫圖的容器的尺寸

var width = 500,
    height = 200,
    margin = { left: 50, top: 30, right: 20, bottom: 20 },
    g_width = width - margin.left - margin.right,
    g_height = height - margin.top - margin.bottom;

定義svg元素

var svg = d3.select("#container")
    .append("svg")
    // 設置width,height
    .attr("width", width) //attribute
    .attr("height", height)

再經過append()添加一個g元素，這段代碼添加了兩個g元素，爲了比較select和selectAll

d3.select("svg").append("g")//添加第一個g
var g = d3.select("svg")
    .append("g") //添加第二個g，並把這個元素賦值給變量g
    .attr("transform", "translate(" + margin.left + "," + margin.top + ")")
    //定義要畫的曲線的數組data[]
var data = [2, 12, 3, 4, 5, 6, 22]

將g成比例縮放

x軸縮放

var scale_x = d3.scale.linear() //使用d3中的scale函數進行縮放，由於是線性的因此使用linear
    .domain([0, data.length - 1]) //domain定義輸入範圍
    .range([0, g_width]) //range（）定義輸出範圍

y軸縮放

var scale_y = d3.scale.linear()
    .domain([0, d3.max(data)]) //domain定義輸入範圍
    .range([0, g_height]) //range（）定義輸出範圍

經過d3下面的svg下面的line()實現line_generator函數

var line_generator = d3.svg.line()
    .x(function(d, i) { return scale_x(i); }) //x座標點的值爲data數組的下標，參數d表示傳進來的數據，i表示下標
    .y(function(d) { return scale_y(d) }) //y座標的值爲數組中實際的每一項的值
    .interpolate("cardinal") //讓線條變得光滑，不是折線而是光滑的曲線

// d3.select("g")
//     .append("path")
//     .attr("d", line_generator(data)) //經過d屬性值，添加line_generator函數
//     // 其實d就是 path-data 的縮寫，d= "M"

當頁面有多個相同元素，select只能選擇符合條件的第一個元素，想要選擇其中某一個指定的元素，能夠把那個元素賦給一個變量，而後使用變量名去實現

以下所示，g表示上面賦值的那個變量g,而不是標籤<g></g>

而selectAll選中的是頁面中全部的元素

g.append("path").attr("d", line_generator(data)) 
//經過d屬性值，添加line_generator函數
// 其實d就是 path-data 的縮寫，d= "M0,2Q0.7999999999999999,11.9,1,12C1.3,12.15,1.7,4.2,2,3S2.7,3.7,3,4S3.7,4.7,4,5S4.7,3.4499999999999997,5,6Q5.2,7.7,6,22"

沒有縮放的初始圖

加縮放後的效果

縮放代碼：將<g></g>成比例縮放

var scale_x = d3.scale.linear() //使用d3中的scale函數進行縮放，由於是線性的因此使用linear
    .domain([0, data.length - 1]) //domain定義輸入範圍
    .range([0, g_width]) //range（）定義輸出範圍

var scale_y = d3.scale.linear()
    .domain([0, d3.max(data)]) //domain定義輸入範圍
    .range([0, g_height]) //range（）定義輸出範圍

給path設置css後的樣子

css代碼：

path {
    /*定義畫出的線條無填充，*/
    fill: none;
    /* 線顏色*/
    stroke: brown;
    /*線條粗細*/
    stroke-width: 2;
}

設置平滑以後的樣子

代碼：

.interpolate("cardinal") //讓線條變得光滑，不是折線而是光滑的曲線

由此，d3畫線就已經完成了，接下來就要畫座標系，請參考下篇文章，~~~