d3.js - 着色图形下的区域

  显示原文与译文双语对照的内容

我被卡住了,想让你的帮助向前前进。

我正在用不同颜色在我的折线图下着色。 我知道梯度的概念,但我想根据我的数据来颜色。 例如 and below 为红色,1到 5之间是粉红色,上面 5为 black 。 有什么方法可以?

这是我的阴影区域的Fragment


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);

时间: 作者:

如果你想用你的区域展示每种不同颜色的颜色,我会尝试使用一个收费的剪辑路径。 理论上,剪辑路径是多个 rectangle 表示你希望区域对象显示的位置。 每个颜色需要一个剪辑路径和区域。

实际上,我发现 Mike Bostock在这里使用了带 D3 的剪辑路径( 简洁),而MDN在这里有一个相当好的参考 有关更多示例,你可以从那里转到 google ;只需确保它们正在谈论SVG剪辑路径。

作者:
...