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

Shade area between two lines using D3

本文关键字：阴影 区域 之间 两条线 D3 使用      更新时间：2023-09-26

我正在尝试对两条线之间的区域进行阴影（垂直）。我曾尝试使用剪辑路径并用矩形遮盖周围环境，但它没有得到我想要的。我在网上找到的许多解决方案只处理另一条线，但就我而言，这些线将始终并排。这是我的代码：

  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

我能够通过指定面积生成器的 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。

.

相关文章：