D3.js pie() Function
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"> zambiatek </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"> zambiatek </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:
