D3.js area() 方法

D3.js中的d3.area()方法用于返回具有默认设置的区域生成器，可进一步用于创建区域。

句法：

d3.area()

参数：此方法不接受参数。

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

下面的示例说明了 D3.js 中的d3.area()方法：

示例 1：

HTML

  

    
    

  

    
        GeeksforGeeks
    
  
    
        
        
    
      
    
        var data = [
            { x: 0, y: 10 },
            { x: 10, y: 30 },
            { x: 20, y: 150 },
            { x: 50, y: 10 },
            { x: 60, y: 150 },
            { x: 70, y: 50 },
            { x: 80, y: 190 }];
  
        data.sort((a, b) => a.y - b.y);
  
        var xScale = d3.scaleLinear()
            .domain([0, 8])
            .range([25, 200]);
        var yScale = d3.scaleLinear()
            .domain([0, 20])
            .range([200, 25]);
  
        // Using area() function to
        // generate area
        var Gen = d3.area()
            .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：

HTML

  

    
    

  

    
        GeeksforGeeks
    
  
    
        
        
    
      
    
        var points = [
            { xpoint: 25, ypoint: 150 },
            { xpoint: 75, ypoint: 50 },
            { xpoint: 100, ypoint: 150 },
            { xpoint: 100, ypoint: 50 },
            { xpoint: 200, ypoint: 150 }];
  
        // Using area() function to generate area
        var Gen = d3.area()
            .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");
  
    

  

输出：