D3.js area.curve() 方法

d3.area.curve () 方法用于为区域提供曲线。 D3.js 提供了几个曲线工厂，可以用来给出不同的曲线。

句法：

d3.area.curve(curve_factory)

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

• curve_factory：此参数是要赋予区域的曲线类型。

返回值：该方法没有返回值。

示例 1：

HTML

    
  
    
    


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

  

输出：

示例 2：

HTML

    
  
    
    


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

  

输出：