The d3.pie() is used to construct a pie generator that has its default settings. This pie generator takes an array of data and then returns an array of objects that contains details about each arc angle.
Syntax:
d3.pie();
Parameters: This function does not accept any parameters.
Return Values: This function returns a pie generator.
Below given are a few examples of the function given above.
Example 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 =
</ script >
</ head >
< body >
< div style = "width:300px; height:300px;" >
< center >
< h1 style = "color:green" >
GeeksforGeeks
</ h1 >
< h2 >
d3.pie()
</ h2 >
</ center >
< svg width = "300" height = "300" >
</ svg >
</ div >
< script >
var data = [1.1,2.2,4.46,2.12,1.36,5.002445,4.1242];
// Selecting SVG using d3.select()
var svg = d3.select("svg");
let g = svg.append("g")
.attr("transform", "translate(150,120)");
// Creating Pie generator
var pie = d3.pie();
// Creating arc
var arc = d3.arc()
.innerRadius(0)
.outerRadius(100);
// Grouping different arcs
var arcs = g.selectAll("arc")
.data(pie(data))
.enter()
.append("g");
// Appending path
arcs.append("path")
.attr("fill", (data, i)=>{
let value=data.data;
return d3.schemeSet3[i];
})
.attr("d", arc);
</ script >
</ body >
</ html >
|
Output:
Example 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 =
</ script >
</ head >
< body >
< div style = "width:300px; height:300px;" >
< center >
< h1 style = "color:green" >
GeeksforGeeks
</ h1 >
< h2 >
d3.pie()
</ h2 >
</ center >
< svg width = "300" height = "300" >
</ svg >
</ div >
< script >
var data = [1,2,4.4,2,1,5,4];
// Selecting SVG using d3.select()
var svg = d3.select("svg");
// Creating Pie generator
var pie = d3.pie();
// Creating arc
var arc = d3.arc()
.innerRadius(0)
.outerRadius(100);
let g = svg.append("g")
.attr("transform", "translate(150,120)");
// Grouping different arcs
var arcs = g.selectAll("arc")
.data(pie(data))
.enter()
.append("g");
// Appending path
arcs.append("path")
.attr("fill", (data, i)=>{
let value=data.data;
return d3.schemeSet3[i+1];
})
.attr("d", arc);
// Adding data to each arc
arcs.append("text")
.attr("transform",(d)=>{
return "translate("+
arc.centroid(d) + ")";
})
.text(function(d){
return d.data;
});
</ script >
</ body >
</ html >
|
Output: