D3.js學習（三）

上一節中，咱們已經畫出了圖表，而且給圖表添加了座標軸的標籤和標題，在這一節中，咱們將要學習幾個繪製線條不一樣特性的幾個函數，以及給圖表添加格柵。ok,進入話題！
如何給線條設置繪製的樣式？

這個其實很是簡單，在咱們以前定義的valueline基礎上加一個.interpolate(「樣式」)就行啦

//定義線條

var valueline = d3.svg.line()

    .interpolate("basis")

    .x(function(d){return x(d.date);})

    .y(function(d){return y(d.close);});

line().interpolate可取的值有不少，須要深刻了解的同窗能夠查看他的詳細說明

不一樣取值的有不一樣效果

給圖表增長格柵

咱們知道，增長一系列的格柵能夠在視覺效果上有一個很大的提高，那麼，咱們怎樣給圖表增長格柵呢？跟前面繪製x軸、y軸同樣，咱們須要爲咱們將要繪製的格柵建立三個部分的代碼：

        1.在css部分給他設置樣式
        2.定義一個初始化（繪製）函數
        3.繪製他

 
CSS部分

.grid .tick {
    stroke: lightgrey;
    opacity: 0.7;
}
.grid path {
    stroke-width: 0;
}

定義格柵的初始化（繪製）函數

//定義格柵繪製函數

function make_x_axis(){

    return d3.svg.axis()

        .scale(x)

        .orient("bottom")

        .ticks(5);

}

function make_y_axis(){

    return d3.svg.axis()

        .scale(y)

        .orient("left")

        .ticks(5);

}

繪製格柵

//繪製格柵-x方向

svg.append("g")

    .attr("class", "grid")

    .attr("transform", "translate(0," + height + ")")

    .call(make_x_axis()

        .tickSize(-height, 0, 0)

        .tickFormat("")

    )

//繪製格柵-y方向

svg.append("g")

    .attr("class", "grid")

    .call(make_y_axis()

        .tickSize(-width, 0, 0)

        .tickFormat("")

    )

上面的代碼中須要說明的是.tickSize()方法，咱們在這裏設置了他們的長度和起始位置，最後一個.tickFormat(「」)是爲了讓全部的tick都沒有標註。最後的效果以下

下節咱們將給圖表進行填充！