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">                 neveropen             </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">                 neveropen             </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:
