D3.js areaRadial() 方法

D3.js中的d3.areaRadial() 方法返回一个区域径向生成器，该生成器具有用于创建径向区域的默认设置。径向区域生成器使用角度和半径访问器来创建区域。径向区域总是相对于原点定位。

句法：

d3.areaRadial()

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

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

下面给出了 D3.js 中d3.areaRadial()方法的几个示例；

示例 1：

HTML

  

    
    

  

    
        GeeksforGeeks
    
    
        D3.js | d3.areaRadial() Method
    
    
        
            
        
    
    
        var points = [
            { x: 0, y: 0 },
            { x: 2, y: 3 },
            { x: 4, y: 12 },
            { x: 6, y: 8 },
            { x: 8, y: 17 },
            { x: 10, y: 15 },
            { x: 12, y: 20 }];
  
        var xScale = d3.scaleLinear()
            .domain([0, 6])
            .range([0, 2 * Math.PI]);
        var yScale = d3.scaleLinear()
            .domain([0, 20])
            .range([90, 30]);
  
        // Use the areaRadial() method
        // to get an area generator 
        var Gen = d3.areaRadial()
            .angle(d => xScale(d.x))
            .innerRadius(d => yScale(d.y / 3))
            .outerRadius(d => yScale(d.y));
  
        d3.select("#gfg")
            .select("g")
            .append("path")
            .attr("d", Gen(points))
            .attr("fill", "green")
            .attr("stroke", "black");
    

  

输出：

示例 2：

HTML

  

    
    

  

    
        GeeksforGeeks
    
    
        D3.js | d3.areaRadial() Method
    
    
        
            
        
    
    
        var data = [
            { x: 10, y: 1 },
            { x: 15, y: 3 },
            { x: 20, y: 5 },
            { x: 25, y: 7 },
            { x: 30, y: 9 },
            { x: 35, y: 11 },
            { x: 40, y: 13 }];
  
        var xScale = d3.scaleLinear()
            .domain([0, 8])
            .range([25, 200]);
        var yScale = d3.scaleLinear()
            .domain([0, 20])
            .range([200, 25]);
  
        // Use the areaRadial() method
        // to get an area generator 
        var Gen = d3.areaRadial()
            .angle(d => xScale(d.x))
            .innerRadius(d => yScale(d.y / 3))
            .outerRadius(d => yScale(d.y));
  
        d3.select("#gfg")
            .select("g")
            .append("path")
            .attr("d", Gen(data))
            .attr("fill", "green")
            .attr("stroke", "black");
    

  

输出：