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

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

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

Рабочий пример, адаптированный из скрипок в комментариях: 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>, состоящего из различных цветные области, и используйте это, чтобы обвести линию значений.

Вы захотите ознакомиться с различными вариантами элемента узора. В этом руководстве по 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/

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

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

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