D3.js arc.innerRadius()函数用法介绍

2021年3月12日14:50:15 发表评论 967 次浏览

本文概述

内半径d3.js中的函数用于设置圆弧的内半径。它使用一个数字来定义圆弧的内半径

语法如下:

arc.innerRadius([radius]);

参数:该函数接受如上所述和以下描述的单个参数。

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

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

范例1:

的HTML

<!DOCTYPE html> 
< html lang = "en" > 
  
< head > 
     < meta charset = "UTF-8" /> 
     < meta name = "viewport"
           content=" width = device -width, initial-scale = 1 .0"/> 
  
     <!--Fetching from CDN of D3.js -->
     < script src = 
         "https://d3js.org/d3.v6.min.js" > 
     </ script >
  
</ head >
  
< body > 
     < div style = "width:300px; height:300px;" >
         < center >
             < h1 style = "color:green" >
                 lsbin
             </ h1 > 
  
             < h2 >
                 arc.innerRadius()
             </ h2 > 
         </ center >
  
         < svg width = "300" height = "300" >
         </ svg >
     </ div >
  
     < script > 
         var svg = d3.select("svg")
             .append("g")
             .attr("transform", "translate(150, 100)");
  
         // Arc gernerator funcion
         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";
     </ script > 
</ body > 
  
</ html >

输出如下:

D3.js arc.innerRadius()函数1

范例2:

的HTML

<!DOCTYPE html> 
< html lang = "en" > 
  
< head > 
     < meta charset = "UTF-8" /> 
     < meta name = "viewport"
           content=" width = device -width, initial-scale = 1 .0"/> 
      
     <!--Fetching from CDN of D3.js -->
     < script src = 
         "https://d3js.org/d3.v6.min.js" > 
     </ script >
</ head >
  
< body > 
     < div style = "width:300px; height:300px;" >
         < center >
             < h1 style = "color:green" >
                 lsbin
             </ h1 > 
  
             < h2 >
                 arc.innerRadius()
             </ h2 > 
         </ center >
  
         < svg width = "300" height = "300" >
         </ svg >
     </ div >
  
     < script > 
         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";
     </ script > 
</ body > 
  
</ html >

输出如下:

D3.js arc.innerRadius()函数2

木子山

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: