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

Я новичок в 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
20140123    9   10  12  22  34
20140124    14  16  18  34  66

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


d3.js linechart stream-graph
person DrewP84    schedule 22.01.2014    source источник

Ответы (1)


arrow_upward
2
arrow_downward

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

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); });
}
person Lars Kotthoff    schedule 22.01.2014
comment
Спасибо за помощь, однако это создает область между верхней и нижней строкой. Полагаю, я не уточнил, что мне нужны отдельные сегменты области между каждой из строк. См.: artfuladvection.com/project/NOAA/percentilesGraph/ - person DrewP84; 23.01.2014
comment
Это помогло мне понять, как создать ОДИН из сегментов области, которые я хотел (см. исходную ссылку WIP), но я не совсем понимаю, как создать остальные. - person DrewP84; 23.01.2014
comment
Верно, извините, это было неясно для меня. Обновлю ответ. - person Lars Kotthoff; 23.01.2014
comment
Спасибо Ларс! Я думаю, что это сделало - мне нужно исправить цвета для каждого сегмента, чтобы убедиться (я тоже еще не знаю, как это сделать, хе), и я приму. - person DrewP84; 23.01.2014