D3.js area.x() 方法

d3.area.x() 方法用于将 x 访问器设置为传递给它的参数，该参数可以是数字或返回数字的函数。

句法：

d3.area.x(x_point)

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

• x_point：这个参数是一个数字，代表一个点或一个返回数字的函数。

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

示例 1：

    
  
    
    

  

    
        GeeksforGeeks
    
  
    
        D3.js | d3.area.x() 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()
          // Using area.x() method
          .x((p) => p.x)
          .y0((p) => 0)
          .y1((p) => p.y);
  
        d3.select("#gfg")
          .append("path")
          .attr("d", Gen(data))
          .attr("fill", "green")
          .attr("stroke", "black");
    

  

输出：

示例 2：

    
  
    
    


    
        GeeksforGeeks
    
  
    
        D3.js | d3.area.x() 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()
           // Using area.x() method
          .x((p) => p.xpoint)
          .y0((p) => 0)
          .y1((p) => p.ypoint);
  
        d3.select("#gfg")
          .append("path")
          .attr("d", Gen(points))
          .attr("fill", "green")
          .attr("stroke", "black");
  
    

  

输出：