D3.js pie.sort()函数

D3.js中的pie.sort()函数用于根据数据的不同属性对数据对象进行排序。比较器函数可用于定义进行排序的基础。

句法：

pie.sort( compare )

参数：此函数接受如上所述和如下所述的单个参数：

• compare：这需要一个比较函数来对不同属性的数据对象进行排序。它是一个可选参数。

返回值：此函数不返回任何内容。

下面的示例说明了 D3.js 中的pie.sort()函数：

示例 1：

HTML

  
  


  
    
      
        GeeksforGeeks
      
      
        pie.sort()
      
      
        When given data array 
        consists objects
      
    
    
    
    Click Me
  
  
    // 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;
      });
  

输出：

• 在点击按钮之前：

• 点击按钮后：

示例 2：

HTML

  
  


  
    
      
        GeeksforGeeks
      
      
        pie.sort()
      
      Sorting values: 
    
    
    
    Click Me
  
  
    // 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;
      });
  

输出：

• 在点击按钮之前：

• 点击按钮后：