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

本文概述内半径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 >

【D3.js arc.innerRadius()函数用法介绍】输出如下：