Javascript 根据值使用渐变颜色填充栏

我在画条形图。目前，每个条都有相同的颜色

我想要一系列的颜色。例如，主颜色是

#00008b

，我将使用不同的浅色

颜色将取决于my

y的值

代码

 svg.append("g")
.attr("class", "bar")
.selectAll("rect")
.data(fullData)
.enter()
.append("rect")
.attr("x", function(d, i) {
    return xScale(d.year);
})
.attr("y", function(d) {
    return yScale(d.sale);
})
.attr("width", xScale.rangeBand())
.attr("height", function(d) {
    return height - margins.bottom - yScale(d.sale);
})
.attr("fill", function(d){
    //code here
})

其想法是获得如下代码：

.attr("fill", function(d){
    mainColor.lighter(d.value);
})

最小的值将得到最浅的蓝色，最大的值将得到最暗的条
您可以做的是定义一个色阶

var colors = d3.scale.linear()
.domain([0, 200]) // you min/max y values
.range(['#000000','#ffffff']) // you min/max color values

然后这样称呼它：

.style('fill', function(d,i) {
    return colors(yScale(d.sale));
})

查看小提琴：
首先，定义您的色阶：

var mycolor = d3.scaleLinear()
    .domain([10, 100])
    .range(["lightblue", "steelblue"]);

并根据数值使用：

.attr("fill", function(d){ return color(d)});

下面是一个演示：


var数据=[40,80,50,160,230,260,10300,140,210]；
变量主体=d3。选择（“主体”）；
var divs=body.selectAll（“div”）
.数据（数据）
.enter（）.append（“div”）；
var color=d3.scaleLinear（）
.domain（[0，300]）
.范围（[“粉蓝”，“午夜蓝]）；
divs.style（“宽度”，函数（d）{返回d+“px”；}）
.attr（“类别”、“分类图表”）
.style（“背景色”，函数（d）{return color（d）}）
.text（函数（d）{return d；}）
.divchart{
字体：10px无衬线；
文本对齐：右对齐；
填充：3倍；
保证金：1px；
颜色：白色；
}
每个条都是纯色的？是的，每个条都是一种颜色。但整个图表将像一个渐变色