値に応じてグラデーションカラーを塗りつぶし

Question

私は棒グラフを描いています。各バーは同じ色をしています。

色の範囲を希望します。例えば、主な色は#00008bで、私はより明るい色を持っています。

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

最小値になります。

色は私のy

CODE

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

アイデアは、次のようなコードを取得することでの値に依存します最も明るい青を取得し、最も大きな値は最も暗いバーになります

あなたは何ができるか

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/