Заполняющая панель с цветами градиента в зависимости от значения

Question

Я рисую планшет. Каждый бар имеет тот же цвет на данный момент.

Я хотел бы иметь ряд цветов. Например, основной цвет #00008b, и у меня будут разные более светлые цвета.

цвета будет зависеть от значения моей 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); 
}) 

Наименьшее значение будет получить самый легкий синий цвет, а самое большое значение - самый темный бар

Answer 1

Во-первых, определить цвет шкалы:

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

И используйте его согласно к значению:

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

Вот демо:

var data = [40, 80, 50, 160, 230, 260, 10, 300, 140, 210]; 
 

 
var body = d3.select("body"); 
 
    
 
var divs = body.selectAll("div") 
 
    .data(data) 
 
    .enter().append("div"); 
 
\t 
 
var color = d3.scaleLinear() 
 
    .domain([0, 300]) 
 
    .range(["powderblue", "midnightblue"]); 
 
\t 
 
divs.style("width", function(d) { return d + "px"; }) 
 
    .attr("class", "divchart") 
 
    .style("background-color", function(d){ return color(d)}) 
 
    .text(function(d) { return d; });

.divchart { 
 
    font: 10px sans-serif; 
 
    text-align: right; 
 
    padding: 3px; 
 
    margin: 1px; 
 
    color: white; 
 
}

<script src="https://d3js.org/d3.v4.min.js"></script>

Answer 2

Что вы можете сделать, это определить цветовую гамму

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

Смотрите скрипку: http://jsfiddle.net/6z7bgxam/