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); });

那麼，咱們將獲得基於線條的上面部分的填充：

 

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