將圖下面的區域着色

我被卡住了，並被認爲可以幫助您前進。將圖下面的區域着色

我試圖用不同顏色陰影線圖下的區域。我知道有漸變的概念，但我想根據我的數據爲它着色。例如，零以下的值爲紅色，1至5之間爲粉紅色，5以上爲黑色。有沒有辦法呢？

這是我的陰影區域

var area = d3.svg.area() 
.x(function (d) { return x(d.timex); }) 
.y0(height) 
.y1(function (d) { return y(d.conct); }); 

svg.append("path") 
     .datum(data) 
     .attr("class", "area") 
     .attr("d", area);

來源

2014-10-20 Linus

我會嘗試使用夾路徑，一個是要與您的區域，以顯示各自不同的顏色的片段。理論上，剪輯路徑將是多個矩形，指示您希望區域對象顯示的位置。您將需要一個剪輯路徑和每個顏色的區域。

實際上，我發現邁克·博斯托克用短片路徑（短暫地）用D3 here，MDN有一個相當不錯的參考文獻here。你可以從那裏到谷歌去尋找更多的例子。只要確保他們在談論SVG剪輯路徑。

來源

2014-10-21 02:30:28 mgold

我還發現這個鏈接有助於理解剪輯路徑：http://apike.ca/prog_svg_clip.html – 2014-10-21 14:59:02

@ mgold：感謝您的幫助。我嘗試使用漸變，並能夠爲區域着色。有沒有一種方法可以讓漸變的偏移值實際上是數組的值？ – Linus 2014-10-24 01:31:18

我沒有建議使用漸變。如果您需要5種不同的顏色，請使用5個不同的區域，每個區域都有實心填充，並使用剪輯路徑。 – mgold 2014-10-25 00:02:42

將圖下面的區域着色

回答

相關問題