D3.js arc()函数

d3.arc()函数用于生成产生圆形图的弧生成器。它基于开始角度和结束角度之间的差异。

句法：

d3.arc();

参数：此函数不接受任何参数。

返回值：此函数返回一个弧发生器函数。

下面的示例说明了 D3.js 中的 d3.arc()函数：

示例 1：

HTML

 
 
  
 
     
     
  
    
     
    
 
  
 
    
        
            
                GeeksforGeeks
             
  
            
                d3.arc()
             
  
        
  
        
        
    
  
     
        var svg = d3.select("svg")
            .append("g")
            .attr("transform", "translate(150,50)");
  
        // Function is used
        var arc = d3.arc()
            .innerRadius(40)
            .outerRadius(45)
            .startAngle(100)
            .endAngle(2 * 180);
  
        svg.append("path")
            .attr("class", "arc")
            .attr("d", arc)
            .attr("fill","green");
     
 
  

输出：

示例 2：

HTML

 

  
 
     
     
  
    
     
    
 
  
 
    
        
  
            
                GeeksforGeeks
             
  
            d3.arc() 
        
  
        
        
    
  
     
        var svg = d3.select("svg")
            .append("g")
            .attr("transform", "translate(150,50)");
  
        // An arc will be created
        var arc = d3.arc()
            .innerRadius(40)
            .outerRadius(45)
            .startAngle(10)
            .endAngle(8);
  
        svg.append("path")
            .attr("class", "arc")
            .attr("d", arc)
            .attr("fill","green");
     
 
  

输出：

示例 3：

HTML

 
 
  
 
     
     
       
    
     
    
  
 
  
 
     
        var svg = d3.select("svg")
            .append("g")
            .attr("transform", "translate(150,50)");
  
        // An arc generator is produced
        var arc = d3.arc()
            .innerRadius(40)
            .outerRadius(45)
            .startAngle(10)
            .endAngle(8);
  
        let arr=arc().split(",");
  
        arr.forEach((e,i)=>{
            console.log(i,e);
        })
     
 
  

输出：