html arc函数,d3.js arc()用法及代码示例

d3.arc()函数用于生成可生成圆图的电弧发生器。它基于起始角度和终止角度之间的差异。

用法:

d3.arc();

参数：该函数不接受任何参数。

返回值：该函数返回电弧发生器函数。

以下示例说明了D3.js中的d3.arc()函数：

范例1：

HTML

content="width=device-width,

initial-scale=1.0"/>

GeeksforGeeks

d3.arc()

var svg = d3.select("svg")

.append("g")

.attr("transform", "translate(150,50)");

// Function is used

var arc = d3.arc()

.innerRadius(40)

.outerRadius(45)

.startAngle(100)

.endAngle(2 * 180);

svg.append("path")

.attr("class", "arc")

.attr("d", arc)

.attr("fill","green");

输出：

范例2：

HTML

content="width=device-width,

initial-scale=1.0"/>

GeeksforGeeks

d3.arc()

var svg = d3.select("svg")

.append("g")

.attr("transform", "translate(150,50)");

// An arc will be created

var arc = d3.arc()

.innerRadius(40)

.outerRadius(45)

.startAngle(10)

.endAngle(8);

svg.append("path")

.attr("class", "arc")

.attr("d", arc)

.attr("fill","green");

输出：

范例3：

HTML

content="width=device-width,

initial-scale=1.0"/>

var svg = d3.select("svg")

.append("g")

.attr("transform", "translate(150,50)");

// An arc generator is produced

var arc = d3.arc()

.innerRadius(40)

.outerRadius(45)

.startAngle(10)

.endAngle(8);

let arr=arc().split(",");

arr.forEach((e,i)=>{

console.log(i,e);

})

输出：