Нужна помощь в построении области между многовариантными линиями - не от оси к строке

Question

Я новичок в d3.js, и я изо всех сил пытаюсь заполнить область между строками на многомерном графике процентили.

• Я не хочу, чтобы какая-либо область была заполнена внизу самой нижней строки или выше самой верхней строки.
• Первый столбец всегда будет в нижней части графика (5-й процентиль)
• В последней колонке всегда будет в верхней части графика (95-го процентиля)
• мне нужно отдельные сегменты площадь между каждой линией

Я знаю, что нужно определить область для заполнения между (y0, y1) как так:

var area = d3.svg.area() 
.x(function(d) { return x(d.date); }) 
.y0(function(d) { return y(BOTTOM); }) 
.y1(function(d) { return y(TOP); }); 

Однако я не могу понять, что положить в для секции .y1. В идеале я бы просто получил следующее значение в следующей строке в TSV, но я не знаю, как это сделать правильно.

Для целей тестирования, у меня есть следующее, что создает один из сегментов области мне нужно:

.y0(function(d) { return y(+d.p05); }) 
.y1(function(d) { return y(+d.p25); }); 

---

Я хочу что-то вроде этого, но этот пример не поможет, так как он не является ссылки на другую строку из CSV/TSV:

http://bl.ocks.org/mbostock/4060954

Этот подобный, но его двумерный, а не многомерный.

http://bl.ocks.org/mbostock/3894205

---

Вот мой незавершенное (просмотреть исходный код):

http://artfuladvection.com/project/NOAA/percentilesGraph/multipercentile.html

Мой TSV настроен так:

date p05 p25 p50 p75 p95 
20140122 3 4 5 6 12 
2014
20140124 14 16 18 34 66 

Любая помощь?

Answer 1

Для одной области код будет выглядеть примерно так.

var area = d3.svg.area() 
    .x(function(d) { return x(d.date); }) 
    .y0(function(d) { return y(+d.p05); }) 
    .y1(function(d) { return y(+d.p25); }); 

per.append("g") 
    .attr("class", "per") 
    .append("path") 
    .attr("class", "area") 
    .attr("d", function (d) { return area(data); }); 

Для нескольких областей, вы можете использовать домен вашего масштаба color, чтобы перебрать различные значения, как вы делали раньше. То есть, код выше был бы в таком цикле.

var values = color.domain(); 
for(var i = 0; i < values.length() - 1; i ++) { 
    var area = d3.svg.area() 
    .x(function(d) { return x(d.date); }) 
    .y0(function(d) { return y(+d[values[i]]); }) 
    .y1(function(d) { return y(+d[values[i+1]]); }); 

    per.append("g") 
    .attr("class", "per-" + values[i]) 
    .append("path") 
    .attr("class", "area-" + values[i]) 
    .attr("d", function (d) { return area(data); }); 
}