wypełnianie obszaru wykresu d3.js różnymi kolorami

Question

Próbuję wypełnić obszar pod wykresem różnymi kolorami, w zależności od zakresów wartości x, np. Dla wartości x od 0 do 10 żółty, od 10 do 20 czerwony i tak dalej. Czy jest jakiś sposób na zrobienie tego?

Moje javascript dla pojedynczego koloru wypełnienia jest

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

Z góry dzięki!

Answer 1

W zasadzie masz dwie możliwości zrobienia tego.

• Można zdefiniować oddzielne obszary dla różnych kolorów.
• Możesz zdefiniować pojedynczy obszar i użyć gradientu do symulacji różnych kolorów.

Drugi prawdopodobnie jest łatwiejszy, ponieważ nie trzeba rysować oddzielnych ścieżek, można po prostu wypełnić ten, który aktualnie wykonujesz.

W przypadku gradientu należy zdefiniować przystanki (tj. Zmiany koloru) odpowiadające wartościom. W szczególności trzeba wprowadzić dwa przystanki w tym samym miejscu, aby wyglądało, jakby kolor nagle się zmienił. Więcej informacji na temat gradientów here. Kod wyglądałby mniej więcej tak.

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

Pozycje przystanków będą określane na podstawie skali.