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轴为时间序列，xscale（这里应该是日期对象而不是字符串）。这里是一个时间序列的例子：Timeseries C3.js fill between lines