javascript - 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   }

工作 fiddle :fill between lines c3.js

但是如果X轴是时间序列，则xscale(这里应该是日期对象而不是字符串)。这是一个时间序列示例:Timeseries C3.js fill between lines