d3.js ----面積圖表

d3設置座標軸樣式，將線性圖標的下段代碼中的line改成area

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

    // 當頁面有多個相同元素，select只能選擇符合條件的第一個元素，想要選擇其中某一個指定的元素，能夠把那個元素賦給一個變量，而後使用變量名去實現
    // 以下所示，g表示上面賦值的那個變量g,而不是標籤<g></g>
    g.append("path").attr("d", area_generator(data))

能夠看到這個時候的圖表樣子以下所示：

設置填充樣式

g.append("path").attr("d", area_generator(data)) //經過d屬性值，添加line_generator函數
        .style("fill", "steelblue") //設置填充樣式

到這兒面積圖表基本就畫好了。?