Shade area between two lines using D3

Question

I am trying to shade the area between two lines(vertically). I had tried using clip paths and masking the surrounding with a rectangle but it didn't get me what I wanted. Many solutions I found online only deal with lines on top of another, but in my case the lines will always be side by side. Here is my code:

  var width = 500;
  var height = 500;


  var data = [

  {
    // line1 data
    x:[268, 293, 251, 287, 265, 269, 253, 251, 253, 260],
    y:[10, 9, 8, 7, 6, 5, 4, 3, 2, 1]
  },
  {
    // line2 data
    x:[232, 207, 249, 213, 235, 231, 247, 249, 247, 240],
    y:[10, 9, 8, 7, 6, 5, 4, 3, 2, 1]
  }
  ];

    var yscale = d3.scale.linear()
                  .range([height, 0])
                  .domain([0,10]);


    var svg = d3.select("#chart").append('svg').style('width', width).style('height', height)
                .append('g');    

    var area = d3.svg.area()
                      .x(function(d,i){return d[0]})
                      .y0(0)
                      .y1(function(d){return yscale(d[1])});
    var areaunder = d3.svg.area()
                      .x(function(d,i){return d[0]})
                      .y0(height)
                      .y1(function(d){return yscale(d[1])});    


    console.log( data[0].x );          
    var max = d3.max(data[0].x);
    var rectWidth = (max - width/2) * 2;

    console.log(rectWidth);

    var xpos = width/2 - (width/2 - d3.min(data[1].x));
    var ypos = 0;

    console.log(xpos);

    //svg.append('rect')
    //    .attr('x', xpos)
    //    .attr('y', ypos)
    //    .attr('width', rectWidth)
    //    .attr('height', height)
    //    .attr('fill', 'red');


    var line = d3.svg.line()
                  .interpolate("cardinal")
                  .x(function(d,i){return  d[0]})
                  .y(function(d){return yscale(d[1])});

    var areas = svg.selectAll('.area')
        .data( data.map(function(d) {return d3.zip(d.x, d.y);}) )
        .enter().append('g')
        .attr("class", 'area');          
        //areas.append('path')
        //.attr('d', function(d){return area(d);});  
        //areas.append('path')
        //.attr('d', function(d){return areaunder(d);})

    // svg.append('path')
    //     .datum( data.map(function(d) {return d3.zip(d.x, d.y);}) )
    //     .attr("class", 'area')
    //     .attr("d", area);

    var lines = svg.selectAll(".lines")
                    .data(data.map(function(d) {return d3.zip(d.x, d.y);}))
                    .enter().append("g")
                    .attr('class', "lines")
    lines.append('path')
          .attr('class', 'pathline')
          .attr('stroke', 'black')
          .attr("fill", "none")
          .attr('d', function(d){return line(d)})

and the jsfiddle

Answer 1

I was able to solve this by specifying x0, x1, y0, and y1 of the area generator. The code to fill the area between the lines:

var indexies = d3.range( data[0].x.length );

var area = d3.svg.area()
                  .interpolate("cardinal")
                  .x0( function(d) { return data[1].x[d] } )
                  .x1( function(d) { return data[0].x[d] } )
                  .y0( function(d) { return yscale(data[1].y[d]) } )
                  .y1(  function(d) { return yscale(data[1].y[d]) } );

svg.append('path')
  .datum(indexies)
  .attr('class', 'area')
  .attr('d', area);

The update jsfiddle.

.