Как установить градиент цвета в barchart с помощью d3.js?

Question

я следующий код

d3.csv("data.csv", function(error, data) { 

    data.forEach(function(d) { 
     d.value = +d.value; 
    }); 
var margin = {top: 20, right: 20, bottom: 70, left: 40}, 
    width = 600 - margin.left - margin.right, 
    height = 400 - margin.top - margin.bottom; 


var x = d3.scale.ordinal().rangeRoundBands([0, width], .05); 

var y = d3.scale.linear().range([height, 0]); 
var y1 = d3.scale.linear().range([height, 0]); 
var xAxis = d3.svg.axis() 
    .scale(x) 
    .orient("bottom"); 


var yAxis = d3.svg.axis() 
    .scale(y) 
    .orient("left"); 

var svg = d3.select("#bar").append("svg") 
    .attr("width", width + margin.left + margin.right) 
    .attr("height", height + margin.top + margin.bottom) 
    .append("g") 
    .attr("transform", 
      "translate(" + margin.left + "," + margin.top + ")"); 

var yAxisRight = d3.svg.axis().scale(y1) 
    .orient("left");    
var line = d3.svg.line() 
      .interpolate("basis") 
      .x(function(d) { return x(d.date); }) 
      .y(function(d) { return y1(d.avg_return); }); 

    x.domain(data.map(function(d) { return d.date; })); 
    y.domain([0, d3.max(data, function(d) { return d.value; })]); 
    y1.domain([0, d3.max(data, function(d) { 
    return d.avg_return; })]); 
/*for x axis*/ 
    svg.append("g") 
     .attr("class", "x axis") 
     .attr("transform", "translate(0," + height + ")") 
     .call(xAxis) 
    .selectAll("text") 
     .style("text-anchor", "end") 
     .attr("dx", "-.8em") 
     .attr("dy", "-.55em") 
     .attr("transform", "rotate(-90)"); 
/*for y axis*/ 
    svg.append("g") 
     .attr("class", "y axis") 
     .call(yAxis) 
    .append("text") 
     .attr("transform", "rotate(-90)") 
     .attr("y", 6) 
     .attr("dy", ".71em") 
     .style("text-anchor", "end") 
     .text("Value ($)"); 

    svg.selectAll("bar") 
     .data(data) 
    .enter().append("rect") 
     .style("fill",function(d) { if (d.value >= 400) {return "green"} else if (d.value<=300) { return "red" } else { return 'yellow'} }) 
     .attr("x", function(d) { return x(d.date); }) 
     .attr("width", x.rangeBand()) 
     .attr("y", function(d) { return y(d.value); }) 
     .attr("height", function(d) { return height - y(d.value); }); 
    svg.append('path') 
    .datum(data) 
    .attr('class', 'sparkline') 
    .attr('d', line); 
    svg.append('circle') 
    .attr('class', 'sparkcircle') 
    .attr('cx', x(data[0].date)) 
    .attr('cy', y1(data[0].avg_return)) 
    .attr('r', 2.5);  
    svg.append("g")  
     .attr("class", "y axis") 
     .attr("transform", "translate(" + width + " ,0)") 
     .style("fill", "red") 
     .call(yAxisRight); 
}); 

мой файл CSV содержит следующие данные

date,value,avg_return 
a,530,70 
b,490,91 
c,450,92 
d,400,78 
e,370,50 
f,340,56 
D,300,32 
h,250,96 
a9,200,73 

я есть использовать градиент цвета для этого цвета (# D73027, # FFFFBF, # 1A9850). как использовать градиент цвета в строке chart..i должны ПГТ цвета на основе (столбец значений)

Answer 1

Отсюда: How to customize the color scale in a D3 line chart?

Я создал свой заказ цветовую гамму:

var color = d3.scale.ordinal() 
    .range(["#D73027", "#FFFFBF" , "#1A9850"]); 

И отредактирован, как вы заполняете ваши бары:

.style("fill", function(d,i){ 
    return color(i); //pass i to scale 
    }) 

Примечание прохожу i в цветовой гамме. Если в шкале не хватает цветов, она обернется и начнется снова.

Работа скрипку: https://jsfiddle.net/thatOneGuy/snjb4q92/2/

Редактировать

Вы говорите, что вы хотите 'границы'. Итак, что я сделал, если его между 0 и 300, взять первый цвет, 300 и 400 занимает второе место, а 400 и 600 занимает третье место.

Логика:

.style("fill", function(d, i) { 
    if (d.value >= 0 && d.value < 300) { 
     return color(0); 
    } else if (d.value >= 300 && d.value < 400) { 
     return color(1); 
    } else if (d.value >= 400 && d.value < 600) { 
     return color(2); 
    } 

    }) 

Обновлено скрипку: https://jsfiddle.net/thatOneGuy/snjb4q92/6/