D3.js area.y1() 方法

d3.area.y1() 方法用于将 y1 访问器设置为传递给它的参数，该参数可以是数字或返回数字的函数，这是第二个点或我们的上限。

句法：

d3.area.y1(y1_point)

参数：此函数接受如上所述和下文所述的单个参数。

• y1_point：这个参数是一个数字下界点或一个返回数字的函数。

返回值：此方法不返回任何值。

示例 1：

    
  
    
    

  

    
        GeeksforGeeks
    
  
    
        D3.js | d3.area.y1() Method
    
  
    
        
        
    
  
    
        var data = [
          {x: 50, y: 10},
          {x: 150, y: 30},
          {x: 200, y: 150},
          {x: 250, y: 10},
          {x: 300, y: 150},
          {x: 350, y: 50},
          {x: 400, y: 190}];
  
        var xScale = 
d3.scaleLinear().domain([0, 8]).range([25, 200]);
        var yScale = 
d3.scaleLinear().domain([0, 20]).range([200, 25]);
  
        var Gen = d3.area()
          .x((p) => p.x)
          .y0((p) => p.y*2)
          // Using area.y1() method
          .y1((p) => p.y*4);
  
        d3.select("#gfg")
          .append("path")
          .attr("d", Gen(data))
          .attr("fill", "green")
          .attr("stroke", "black");
    

  

输出：

示例 2：

    
  
    
    


    
        GeeksforGeeks
    
  
    
        D3.js | d3.area.y1() Method
    
  
    
        
    
    
  
    
        var points = [
          {xpoint: 25,  ypoint: 150},
          {xpoint: 75,  ypoint: 50},
          {xpoint: 100, ypoint: 150},
          {xpoint: 100, ypoint: 50},
          {xpoint: 200, ypoint: 150}];
  
  
        var Gen = d3.area()
          .x((p) => p.xpoint)
          .y0((p) => p.ypoint/2)
          // Setting upper bounds
          .y1((p) => p.ypoint);
  
        d3.select("#gfg")
          .append("path")
          .attr("d", Gen(points))
          .attr("fill", "green")
          .attr("stroke", "black");
  
    

  

输出：