css - 给图表下的区域着色

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 剪辑路径即可。