D3.js arc.cornerRadius()函数

arc.cornerRadius()函数用于设置圆角的圆角半径。如果未指定半径，则返回当前角半径访问器，默认为：

function cornerRadius() {
    return 0;
}

句法：

arc.cornerRadius([radius]);

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

• radius：此参数采用一个数字，该数字决定拐角的半径。

返回值：此函数返回弧生成器。

示例 1：

HTML

 
 
  
 
     
     
      
    
     
    
  

  
 
    
        
  
            
                GeeksforGeeks
             
  
            
                arc.cornerRadius()
             
        
  
        
        
    
  
     
        var svg = d3.select("svg")
            .append("g")
            .attr("transform", "translate(150,200)");
  
        // An arc generator created
        var arc = d3.arc()
            .outerRadius(-5)
            .innerRadius(150)
            .startAngle(0)
            // Use of cornerRadius Function
            .cornerRadius(6666)
            .endAngle(1);
  
        svg.append("path")
            .attr("class", "arc")
            .attr("d", arc);
  
        let p = document.querySelector(".arc");
        p.style.fill="green";
     

  

输出：

示例 2：

HTML

 
 
  
 
     
     
   
    
     
    
  

  
 
    
        
            
                GeeksforGeeks
             
  
            
                arc.cornerRadius()
             
  
        
  
        
        
    
  
     
        var svg = d3.select("svg")
            .append("g")
            .attr("transform", "translate(120,200)");
  
        // An arc generated
        var arc = d3.arc()
            .outerRadius(140)
            .innerRadius(200)
            .startAngle(0)
            // Use of cornerRadius Function
            .cornerRadius(20)
            .endAngle(1);
  
        svg.append("path")
            .attr("class", "arc")
            .attr("d", arc);
  
        let p = document.querySelector(".arc");
        p.style.fill="green";
     
 
  

输出：