着色图下的区域

Question

我被困住了，并且想要得到你的帮助继续前进。

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

Answer 1

我会尝试使用剪辑路径，一个用于您想要显示在您所在区域的每种颜色。理论上，剪辑路径将是多个矩形，指示您希望区域对象显示的位置。您需要为每种颜色设置一个剪辑路径和区域。

在实践中，我发现Mike Bostock使用剪辑路径（简要地）使用D3 here，并且MDN具有相当好的参考here。你可以从那里到谷歌周围寻找更多例子;只是确保他们正在谈论SVG剪辑路径。