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

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

?

?

設置填充樣式

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

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

定義填充區(qū)域

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

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

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

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

繪制填充區(qū)域

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

//Get the data d3.tsv("../data/data.tsv", function(error, data){ .... //繪制填充區(qū)域 svg.append("path") .datum(data) .attr("class", "area") .attr("d", area); .... 這樣，我們的填充就已經(jīng)完成了， 另外，如果我們改變前面的填充區(qū)域的定義： //定義填充區(qū)域 var area = d3.svg.area() .x(function(d){ return x(d.date); }) .y0(0) .y1(function(d){ return y(d.close); }); 那么，我們將得到基于線條的上面部分的填充： 下節(jié)我們將學習如何往圖表中繪制多條線條！

轉(zhuǎn)載于:https://www.cnblogs.com/magic-xxj/p/9186097.html

總結

以上是生活随笔為你收集整理的D3.js学习（四）的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。