D3.js pie() Function

0 0 1 minute read

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=  
        "https://d3js.org/d3.v6.min.js">  
    </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=  
        "https://d3js.org/d3.v6.min.js">  
    </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>