d3.js pie()用法及代碼示例

d3.pie()用於構造具有默認設置的餅圖生成器。此Pie生成器獲取一個數據數組，然後返回一個對象數組，其中包含有關每個弧角的詳細信息。

用法:

d3.pie();

參數：該函數不接受任何參數。

返回值：此函數返回一個餅圖生成器。

下麵給出的是上麵給出的函數的一些例子。

範例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>

輸出：

範例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>

輸出：

相關用法

注：本文由純淨天空篩選整理自tarun007大神的英文原創作品 D3.js pie() Function。非經特殊聲明，原始代碼版權歸原作者所有，本譯文未經允許或授權，請勿轉載或複製。