Площадь области диаграммы d3.js с разными цветами

Question

Я пытаюсь заполнить область под графиком разными цветами, в зависимости от диапазонов значений х, например, для значений x от 0 до 10 желтых, от 10 до 20 красных и так далее. Есть ли способ сделать это?

Мой Javascript для одного цвета заливки является

var m = 80; 
var w = 900 - 3*m; 
var h = 600- 3*m; 

var x = d3.scale.linear().range([0, w]); 
var y = d3.scale.linear().range([h, 0]); 
x.domain(d3.extent(data, function(d) { return d.time; })); 
y.domain(d3.extent(data, function(d) { return d.points; })); 

var line = d3.svg.line() 
.x(function(d) { 
return x(d.time); 
}) 

.y(function(d) { 
return y(d.points); 
}) 

var graph = d3.select("#graph").append("svg:svg") 
      .attr("width", w+3*m) 
      .attr("height", h+3*m) 
      .append("svg:g") 
      .attr("transform", "translate(" + 1.5*m + "," + 1.5*m + ")"); 

var area = d3.svg.area() 
.x(function(d) { return x(d.time); }) 
.y0(h) 
.y1(function(d) { return y(d.points); }); 

graph.append("path") 
.datum(data) 
.attr("class", "area") 
.attr("d", area) 
.style("fill","steelblue"); 

Заранее спасибо!

Answer 1

У вас в основном есть два варианта для этого.

• Вы можете определить отдельные области для разных цветов.
• Вы можете определить одну область и использовать градиент для имитации разных цветов.

Второй, вероятно, проще, так как вам не нужно рисовать какие-либо отдельные пути, вы можете просто заполнить тот, который вы сейчас делаете.

Для градиента вам нужно будет определить остановки (то есть изменения цвета), соответствующие значениям. В частности, вам нужно будет ввести две остановки в одном месте, чтобы они выглядели так, как будто цвет меняется внезапно. Дополнительная информация о градиентах here. Код будет выглядеть примерно так.

var grad = graph.append("defs") 
    .append("linearGradient") 
    .attr("id", "grad"); 
grad.append("stop").attr("offset", "0%").attr("stop-color", "yellow"); 
grad.append("stop").attr("offset", "10%").attr("stop-color", "yellow"); 
grad.append("stop").attr("offset", "10%").attr("stop-color", "red"); 
grad.append("stop").attr("offset", "20%").attr("stop-color", "red"); 
// etc 

graph.append("path") 
    .style("fill", "url(#grad)"); 

Позиции остановок будут определяться вашей шкалой.