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. 1.在css部分給他設置樣式
2. 2.定義一個初始化（繪制）函數
3. 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都沒有標注。最后的效果如下

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