D3.js pie.sortValues()函数

D3,js中的pie.sortValues()函数用于将值比较器设置为给定函数。当没有指定比较器函数时返回当前值比较器，默认为降序。

值和数据比较器之间的区别在于，两个参数 a 和 b 是使用值访问器从数据数组派生的值。如果b的弧必须在a的弧之前，则比较器函数必须返回一个大于 0 的值。

句法：

pie.sortValues( compare(a, b) )

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

• 比较器：它采用比较器函数来比较两个参数a和b ，在此基础上进行排序。它是一个可选参数。

返回值：此函数返回当前值比较器。

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

示例 1：

HTML

  

    
    

  

    
        
            
                GeeksforGeeks
            
            
                pie.sortValues()
            
        
        
        
        Click Me
    
    
        // Data to be added in the pie chart
        var data = [
            { "property": "fp5", "value": 5 },
            { "property": "gp5", "value": 16 },
            { "property": "bp4", "value": 10 },
            { "property": "ap3", "value": 12 },
            { "property": "mp2", "value": 19 },
            { "property": "kp1", "value": 21 },
        ]
  
        // 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 updatePie() {
  
            // Creating Pie generator
            var pie = 0
            var pie = d3.pie()
                .value((d) => { return d.value })
  
                // Use of pie.sortValues() Function
                .sortValues(function (a, b) {
                    return a - b;
                })
                (data);
            // 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)
                .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(0)
            .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.sortValues();
            
        
        
        
        Clickme
    
    
        // Data to be added in the pie chart
        var data = [
            { "property": "fp5", "value": "5" },
            { "property": "gp5", "value": "6" },
            { "property": "bp4", "value": "b" },
            { "property": "ap3", "value": "a" },
            { "property": "mp2", "value": 9 },
            { "property": "kp1", "value": "8" },
        ]
  
        // 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 updatePie() {
            // Creating Pie generator
            var pie = 0
            var pie = d3.pie()
                .value((d) => { return d.value })
  
                // Use of pie.sortValues() Function
                .sortValues(function (b, a) {
                    console.log("a: " + a + ",
                      b: " + b + ",
                        a - b: ", b - a);
          return b - a;
                })
                (data);
            // Creating arc
            var arc = d3.arc()
                .innerRadius(30)
                .outerRadius(80);
  
            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.schemeSet1[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(30)
            .outerRadius(80);
  
        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.schemeSet1[i];
            })
            .attr("d", arc);
  
        arcs.append("text")
            .attr("transform", (d) => {
                return "translate(" +
                    arc.centroid(d) + ")";
            })
            .text(function (d) {
                return d.value;
            });
    

  

输出：

• 在点击按钮之前：

• 点击按钮后：