我想使用 D3 绘制具有多个停止的颜色渐变 - 从红色过渡到橙色、黄色、绿色、蓝色、粉红色、紫色。
这是据我所知,从红色到蓝色:http: //jsfiddle.net/Y2zue/
我通过绘制矩形并插入颜色来做到这一点:
var color = d3.scale.linear()
.domain([0, values.length - 1])
.range(["hsl(62,100%,90%)", "hsl(228,30%,20%)"]);
...
g.each(function(d) {
color.interpolate(d.value);
d3.select(this).selectAll("rect")
.data(values)
.enter().append("rect")
.attr("x", x)
.attr("width", x.rangeBand())
.attr("height", y.rangeBand)
.style("fill", color);
});
我基于 Mike Bostock 的 HSL 色阶示例:https ://gist.github.com/mbostock/3014589
但是,现在我想知道是否应该使用 SVG 线性渐变,例如http://bl.ocks.org/d3noob/4433087或http://jsfiddle.net/ZCwrx/
最好的方法是什么 - 矩形或线性渐变?