如何在d3

Question

我是D3 js的新手 我试图为列创建不同的阴影，例如：

• 如果数据集值40的范围为0到40，则为红色
• 如果数据集值89的范围是0到89，那么颜色为红色（范围0到40）+蓝色（范围41到89），依此类推。

我试过fiddle。

var dataset = [40,89,35,66,97,176];

var height = 400,
width =600,
offset =20,
barwidth=30;

var svg = d3.selectAll('#chart')
.append('svg')
.attr('width', width)
.attr('height', height)
.style('background','#ccc')

svg.selectAll('rect')
.data(dataset)
.enter()
.append('rect')

.style('fill',function(d){
    if(d==40)
    {
        return 'red';
    }
    else
    {
        return 'blue';
    }
})
.attr('width', barwidth)
.attr('height',function(d,i){
    return d;
})
.attr('x', function(d,i){
    return i * (barwidth+offset);
})
.attr('y', function(d ,i){
    return height - d;
});