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

D3.js中的pie.sort()函數用於根據數據的不同屬性對數據對象進行排序。比較器函數可用於定義排序的基礎。

用法:

pie.sort( compare )

參數：該函數接受如上所述和以下描述的單個參數：

compare:這需要比較函數來對不同屬性上的數據對象進行排序。它是一個可選參數。

返回值：此函數不返回任何內容。

下麵的示例說明了D3.js中的pie.sort()函數：

範例1：

HTML

<!DOCTYPE html> 
<html> 
<head> 
  <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> 
        pie.sort() 
      </h2> 
      <h3> 
        When given data array  
        consists objects 
      </h3> 
    </center> 
    <svg width="300" height="250"> 
    </svg> 
    <button>Click Me</button> 
  </div> 
  <script> 
    // Data to be added in the pie chart 
    var data = [ 
      { "value":11, "property":"dp1" }, 
      { "value":12, "property":"bp2" }, 
      { "value":32, "property":"ap3" }, 
      { "value":14, "property":"np4" }, 
      { "value":5, "property":"fp5" }, 
      { "value":16, "property":"gp6" } 
    ] 
  
    // Selecting SVG using d3.select() 
    var svg = d3.select("svg"); 
  
    // Creating Pie generator 
    var pie = d3.pie() 
      // Using the pie.value() Function 
      .value((d) => { return d.value }) 
      (data); 
  
    function updatePie() { 
      // Creating Pie generator 
      var pie = 0 
      var pie = d3.pie() 
        
        .value((d) => { return d.value }) 
  
        // Using the pie.sort() Function 
        .sort(function (a, b) { 
          return b.property 
            .localeCompare(a.property); 
        }) 
        (data); 
      // Creating arc 
      var arc = d3.arc() 
        .innerRadius(50) 
        .outerRadius(100); 
  
      let g = svg.append("g") 
        .attr("transform", "translate(150,120)"); 
  
      // Grouping different arcs 
      var arcs = g.selectAll("arc") 
        .data(pie) 
        .enter() 
        .append("g"); 
  
      // Appending path  
      arcs.append("path") 
        .attr("fill", (data, i) => { 
          return d3.schemeSet2[i]; 
        }) 
        .attr("d", arc); 
  
      arcs.append("text") 
        .attr("transform", (d) => { 
          return "translate(" + 
            arc.centroid(d) + ")"; 
        }) 
        .text(function (d) { 
          return d.value; 
        }); 
    } 
    let btn = document.querySelector("button") 
    btn.addEventListener("click", updatePie); 
  
    // Creating arc 
    var arc = d3.arc() 
      .innerRadius(50) 
      .outerRadius(100); 
  
    let g = svg.append("g") 
      .attr("transform", "translate(150,120)"); 
  
    // Grouping different arcs 
    var arcs = g.selectAll("arc") 
      .data(pie) 
      .enter() 
      .append("g"); 
  
    // Appending path  
    arcs.append("path") 
      .attr("fill", (data, i) => { 
        return d3.schemeSet2[i]; 
      }) 
      .attr("d", arc); 
  
    arcs.append("text") 
      .attr("transform", (d) => { 
        return "translate(" + 
          arc.centroid(d) + ")"; 
      }) 
      .text(function (d) { 
        return d.value; 
      }); 
  </script> 
</body> 
</html>

輸出：

在單擊按鈕之前：

單擊按鈕後：

範例2：

HTML

<!DOCTYPE html> 
<html> 
<head> 
  <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> 
        pie.sort() 
      </h2> 
      <h3>Sorting values:</h3> 
    </center> 
    <svg width="300" height="250"> 
    </svg> 
    <button>Click Me</button> 
  </div> 
  <script> 
    // Data to be added in the pie chart 
    var data = [ 
      { "value":11, "property":"dp1" }, 
      { "value":12, "property":"bp2" }, 
      { "value":32, "property":"ap3" }, 
      { "value":14, "property":"np4" }, 
      { "value":5, "property":"fp5" }, 
      { "value":16, "property":"gp6" } 
    ] 
  
    // Selecting SVG using d3.select() 
    var svg = d3.select("svg"); 
  
    // Creating Pie generator 
    var pie = d3.pie() 
      // Use of pie.value() Function 
      .value((d) => { return d.value }) 
      (data); 
  
    function upadtePie() { 
      // Creating Pie generator 
      var pie = 0 
      var pie = d3.pie() 
        .value((d) => { return d.value }) 
  
        // Using the pie.sort() Function 
        .sort(function (a, b) { 
          return b.value > a.value; 
        }) 
        (data); 
      // Creating arc 
      var arc = d3.arc() 
        .innerRadius(50) 
        .outerRadius(100); 
  
      let g = svg.append("g") 
        .attr("transform", "translate(150,120)"); 
  
      // Grouping different arcs 
      var arcs = g.selectAll("arc") 
        .data(pie) 
        .enter() 
        .append("g"); 
  
      // Appending path  
      arcs.append("path") 
        .attr("fill", (data, i) => { 
          return d3.schemeSet2[i]; 
        }) 
        .attr("d", arc); 
  
      arcs.append("text") 
        .attr("transform", (d) => { 
          return "translate(" + 
            arc.centroid(d) + ")"; 
        }) 
        .text(function (d) { 
          return d.value; 
        }); 
    } 
    let btn = document.querySelector("button") 
    btn.addEventListener("click", upadtePie); 
    // Creating arc 
    var arc = d3.arc() 
      .innerRadius(50) 
      .outerRadius(100); 
  
    let g = svg.append("g") 
      .attr("transform", "translate(150,120)"); 
  
    // Grouping different arcs 
    var arcs = g.selectAll("arc") 
      .data(pie) 
      .enter() 
      .append("g"); 
  
    // Appending path  
    arcs.append("path") 
      .attr("fill", (data, i) => { 
        return d3.schemeSet2[i]; 
      }) 
      .attr("d", arc); 
  
    arcs.append("text") 
      .attr("transform", (d) => { 
        return "translate(" + 
          arc.centroid(d) + ")"; 
      }) 
      .text(function (d) { 
        return d.value; 
      }); 
  </script> 
</body> 
</html>

輸出：

在單擊按鈕之前：

單擊按鈕後：

相關用法

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