D3.js arc.innerRadius()函数

d3.js 中的arc.innerRadius函数用于设置圆弧的内半径。它需要一个定义圆弧内半径的数字。

句法：

arc.innerRadius([radius]);

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

• radius：这定义了圆弧内半径的大小。

返回值：此函数不返回任何内容。

示例 1：

HTML

 

    
    
 
    
    
    
 

 

    
        
            
                GeeksforGeeks
            
 
            
                arc.innerRadius()
            
        
 
        
        
    
 
    
        var svg = d3.select("svg")
            .append("g")
            .attr("transform", "translate(150,100)");
 
        // Arc gernerator function
        var arc = d3.arc()
            .outerRadius(0)
 
            // Use of innerRadius Function
            .innerRadius(60)
            .startAngle(0)
            .endAngle(10);
 
        svg.append("path")
            .attr("class", "arc")
            .attr("d", arc);
 
        let p = document.querySelector(".arc");
        p.style.fill="green";
    

 

输出：

示例 2：

HTML

 

    
    
     
    
    
    

 

    
        
            
                GeeksforGeeks
            
 
            
                arc.innerRadius()
            
        
 
        
        
    
 
    
        var svg = d3.select("svg")
            .append("g")
            .attr("transform", "translate(150,100)");
 
        // Arc generator function
        var arc = d3.arc()
            .outerRadius(10)
 
            // Use of innerRadius Function
            .innerRadius(50)
            .startAngle(0)
            .endAngle(10);
 
        svg.append("path")
            .attr("class", "arc")
            .attr("d", arc);
 
        let p = document.querySelector(".arc");
        p.style.fill="green";
    

 

输出：