El d3.pie() se usa para construir un generador circular que tiene su configuración predeterminada. Este generador circular toma una array de datos y luego devuelve una array de objetos que contiene detalles sobre cada ángulo de arco.
Sintaxis:
d3.pie();
Parámetros: Esta función no acepta ningún parámetro.
Valores devueltos: esta función devuelve un generador circular.
A continuación se dan algunos ejemplos de la función dada anteriormente.
Ejemplo 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">
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>
Producción:
Ejemplo 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">
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>
Producción:
