本文概述
内半径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 >输出如下：
范例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 >输出如下：
