D3.js學習（四）

上一節我們已經學習了線條樣式和格柵的繪制，在這一節中我們將要根據之前繪制的線條對圖表進行填充，首先來看一下我們的目標吧

在這個圖表中，我們對位於線條下面的空間進行了填充，那么，如何改做到呢？

 

 

設置填充樣式

這里設置我們填充區域的樣式，我們使用淺藍色進行填充：

.area{
    fill: lightsteelblue;
    stroke-width: 0;
  }

定義填充區域

就像前面繪制線條之前一樣，我們首先要對其進行定義

//定義填充區域
  var area = d3.svg.area()
              .x(function(d){ return x(d.date); })
              .y0(height)
              .y1(function(d){ return y(d.close); });

其實定義填充區域跟前面我們定義繪制線條函數特別像,不知道大家發現沒有呢? 在這里,多的只是y0(height)，如果我們把填充區域看做是由一條條垂直方向上的線條組成的話那就好理解了，這個y0，y1實際上就是組成整個區域的這些線的兩個端點，y0(height)表示從x軸開始到與線條的交點處結束。可以用圖來說明：

我們可以在定義玩坐標軸之后立即定義這個填充區域，就像這樣：

繪制填充區域

前面對填充區域定義了之后，我們拿它來繪制填充區域了

//Get the data
  d3.tsv("../data/data.tsv", function(error, data){
    ....
    //繪制填充區域
    svg.append("path")
      .datum(data)
      .attr("class", "area")
      .attr("d", area);
   ....

這樣，我們的填充就已經完成了， 另外，如果我們改變前面的填充區域的定義：

//定義填充區域
 var area = d3.svg.area()
             .x(function(d){ return x(d.date); })
             .y0(0)
             .y1(function(d){ return y(d.close); });

那么，我們將得到基於線條的上面部分的填充：

 

下節我們將學習如何往圖表中繪制多條線條！