将图下面的区域着色

我被卡住了，并被认为可以帮助您前进。将图下面的区域着色

我试图用不同颜色阴影线图下的区域。我知道有渐变的概念，但我想根据我的数据为它着色。例如，零以下的值为红色，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

将图下面的区域着色

回答

相关问题