C3.js заполнить область между кривыми

Question

у меня есть график, как этот

Мне нужно, чтобы заполнить пространство между 3 пунктирной линией. например: область заполнения между 2 красной пунктирной линией, 2 синей пунктирной линией и 2 зеленой пунктирной линией.

Я пытаюсь сделать это следующим образом:

function fillArea(){ 
    var d = {}; 
    var x = []; 
    var y1 = []; 
    var y0 = []; 

    for(var i = 0; i < chartJson.length; i++){ 
     x.push(chartJson[i].run_date); 
     y0.push(chartJson[i].diviationMinus); 
     y1.push(chartJson[i].diviationPlus); 
    } 
    d.x = x; 
    d.y1 = y1; 
    d.y0 = y0; 


    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); }); 

} 
fillArea(); 

, но ничего не произошло. Вот jsfiddle https://jsfiddle.net/1xnc6y58/

Answer 1

Изменение функции fillArea() в коде ниже:

function fillArea(){ 
    var yscale = chart.internal.y; 
    var xscale = chart.internal.x; 
var indexies = d3.range(chartJson.length); 

var area = d3.svg.area() 
         .interpolate("linear") 
      .x(function(d) {return xscale(chartJson[d].x); }) 
      .y0(function(d) { return yscale(chartJson[d].y0); }) 
      .y1(function(d) { return yscale(chartJson[d].y1); }); 

d3.select("#chart svg g") 
    .append('path') 
    .datum(indexies) 
    .attr('class', 'area') 
    .attr('d', area);} 

Добавлено CSS:

path.area { 
    stroke: lightgreen; 
    fill: #e6ffe6; 
    opacity: 0.9 } 

Работа скрипку: fill between lines c3.js

Однако, если ось X является timeseries, xscale (здесь должен быть объект даты вместо строки). Вот пример времени: Timeseries C3.js fill between lines