Заполнить область между двумя линиями

Question

Извинения за такой базовый вопрос. Возможно ли заполнить область между двумя линиями?

Например, у меня есть исторические данные с высокой/низкой температурой. Я бы хотел создать затененную область между этими двумя таймами.

Я пытался использовать функцию площади Linechart, как это:

return [ 
    { 
     values: tsData.normal, 
     key: 'Historical Normal', 
     classed: 'dashed' 
    }, 
    { 
     area: true, 
     values: tsData.hi, 
     key: 'Historical Max', 
     color: '#0000ff' 
    }, 
    { 
     area: true, 
     values: tsData.low, 
     key: 'Historical Min', 
     color: '#ffffff', 
     fillOpacity: 1 
    } 
]; 

Какие результаты в этом образе:

Обратите внимание, что линии сетки ниже Исторического Min линии скрыты заполненными областями. Это решение немного хакерское и уродливое. Есть ли более прямой способ сделать это?

Answer 1

Я достиг лучшего решения, рисуя область с помощью d3.

Сначала я создал массив (я назвал areaData), который объединяет tsData.hi и tsData.low. Для каждой точки данных я нажимаю, например: {x: "Значение x", y0: "Значение y от tsData.hi", y1: "Значение y от tsData.low"}

Затем я определил масштаб х и у на основе шкал Картографическая:

var x = chart.xScale(); 
var y = chart.yScale(); 

Затем я добавил определение области, как

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

Далее я обратил область, используя:

d3.select('.nv-linesWrap') 
    .append("path") 
    .datum(areaData) 
    .attr("class", "area") 
    .attr("d", area) 
    .style("fill", "#AEC7E8") 
    .style("opacity", .2); 

Это обеспечивает лучшее решение. Поскольку nvd3 обновляет диаграмму при изменении размера окна. Я завернул рисунок области в функцию. Так что я могу вызвать функцию при изменении размеров окна при удалении ранее нарисованных площади следующим образом:

var drawArea = function() { 
    d3.select(".area").remove(); 
    d3.select('.nv-linesWrap') 
     .append("path") 
     .datum(areaData) 
     .attr("class", "forecastArea") 
     .attr("d", area) 
     .style("fill", "#AEC7E8") 
     .style("opacity", .2); 
} 
drawArea(); 

nv.utils.windowResize(resize); 

function resize() { 
    chart.update(); 

    drawArea(); 
} 

Я также отключить переключение серии и выключается с помощью легенды, как я не обрабатывал тот случай:

chart.legend.updateState(false); 

результат: