Линейный график / график с нерегулярным пороговым полем

Question

Нужно создать гистограмму с нерегулярным цветным пороговым полем на заднем плане, чтобы каждая точка данных имела свой собственный набор минимальных / максимальных порогов, который в конечном итоге выглядел бы примерно так: http://dcalvitti.webs.com/plant/SAMPLE.png

Посмотрел примеры D3 как этот: http://bl.ocks.org/mbostock/4062844

Можно ли манипулировать последним примером, чтобы он больше походил на изображение, которое я создал?

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

Answer 1

График, показанный на вашем образце изображения, на самом деле намного проще, чем связанный пример; для этого вам не нужно создавать обтравочный контур и не нужно дважды рисовать линию двумя разными цветами.

Для рисования цветного фона используйте генератор области пути, созданный с d3.svg.area(), Установить y0 функция доступа, чтобы извлечь ваше минимальное значение для каждой точки в вашем массиве данных, и y1 функция доступа для извлечения максимального значения.

Затем нарисуйте линию поверх обычного линейного графа с d3.svg.line() генератор пути.

Рабочий пример, адаптированный из скрипок в комментариях: http://jsfiddle.net/h45CD/12/
(Примечание: я закомментировал половину набора данных, так как значения "год" были повторены, не уверен, что это должно было представлять.)

Ключевой код:

// Define the value line path generator
var line = d3.svg.line()                        
    .x( function(d) { return x(d.year); } ) 
    .y( function(d) { return y(d.temp); } );

// Define the area path generator
var area = d3.svg.area()
    .x(  function(d) {  return x(d.year); } )
    .y0( function(d) { return y(d.min); } )
    .y1( function(d) { return y(d.max); } );

/* ... */

// Add the background area showing the historic range
svg.append("path")
   .datum(data)
   .attr("class", "historicRange")
   .attr("d", area);

// Add the value line 
svg.append("path") 
    .datum(data)
    .attr("class", "dataline")
    .attr("d", line);

---

Редактировать на основе комментариев

Если вы хотите, чтобы линия меняла цвет в зависимости от исторических значений, в отличие от линии, нарисованной поверх диапазона фона, наиболее простым решением, вероятно, является создание <pattern> элемент, состоящий из разноцветных областей, и используйте его для обводки строки значения.

Вы захотите ознакомиться с различными вариантами элемента pattern. Это руководство по MDN имеет хорошее введение, или вы можете погрузиться в полные спецификации W3.

В этой ситуации мы хотим, чтобы размер шаблона определялся и располагался относительно системы координат, используемой для рисования линии, независимо от размера или формы самой линии. Это означает, что мы будем устанавливать как patternUnits и patternContentUnits быть userSpaceOnUse, height а также width шаблона будет высота и ширина области построения.

Внутри шаблона мы нарисуем область, представляющую диапазон max-min, но нам также нужно нарисовать отдельные области разными цветами для значений выше max и значений ниже min. Мы можем использовать один и тот же генератор области для каждого, но нам нужно каждый раз менять функции доступа y0/y1.

Ключевой код:

// Add the pattern showing the historic range
var pattern =  defs.append("pattern")
    .datum(data) //add the data to the <pattern> element
                //so it will be inherited by each <path> we append
    .attr({
        "patternUnits":"userSpaceOnUse",
        "patternContentUnits":"userSpaceOnUse",
        "width": width,
        "height": height
    })
    .attr("id", "strokePattern");

pattern.append("path")
   .attr("class", "historicRange between")
   .attr("d", area);

pattern.append("path")
   .attr("class", "historicRange above")
   .attr("d", area.y1( 0 )
                  .y0( function(d){return y(d.max);} )
        );

pattern.append("path")
   .attr("class", "historicRange below")
   .attr("d", area.y1( function(d){return y(d.min);}  )
                  .y0( height )
        );

// Add the value line 
plot.append("path")             
    .datum(data)            
    .attr("class", "dataline")  
    .attr("d", line)
    .style("stroke", "url(#strokePattern)");        

Рабочий пример: http://jsfiddle.net/h45CD/14/

Answer 2

Я включил ссылку на веб-страницу с диаграммами, созданными мной на основе AMCharts и с помощью основателя этого веб-сайта. Содержит несколько примеров вышеуказанного вопроса и многое другое..

http://dcalvitti.webs.com/SAMPLE/NEWWEBINDEX.html

Предоставленные графики все еще работают. Например, у AMcharts есть функция, которая обрезает цвет линии выше / ниже определенного значения, о котором я не знал, поэтому еще предстоит проделать большую работу. Я провел много недель в чартах и ​​думал, что поделюсь. Я уверен, что кто-то найдет что-то новое здесь, в будущем...