使用D3的兩條線之間的陰影區域

Question

我想陰影兩條線（垂直）之間的區域。我曾嘗試使用剪輯路徑並用矩形遮蓋周圍，但沒有得到我想要的。我在網上找到的許多解決方案只處理另一個上面的線條，但在我的情況下線條總是並排的。 這裏是我的代碼：

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

和jsfiddle

Answer 1

我能夠通過指定X0，X1，Y0，Y1和地區發電機來解決這個問題。 的代碼來填充區域的線之間：

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

更新jsfiddle。

。