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

使用D3在两条线之间的阴影区域

0 个答案: