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

那么，咱们将获得基于线条的上面部分的填充：

 

下节咱们将学习如何往图表中绘制多条线条！