D3.js chord.sortChords()函数

D3.js中的chord.sortChords()函数用于将和弦比较器设置为指定函数或 null 并返回此和弦布局。

句法：

chord.sortChords(compare);

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

• compare：此参数是设置和弦比较器的函数。

返回值：此函数返回和弦布局。

下面的程序说明了D3.js中的chord.sortChords()函数

示例 1：

HTML

 
 
  
  
  
 

   
    GeeksForGeeks
    D3.js | chord.sortChords() Function
    
    
      // Create the svg area
      var svg = d3.select("#GFG")
          .append("svg")
          .attr("width", 440)
          .attr("height", 220)
          .append("g")
          .attr("transform", "translate(220,220)");
  
      // Create input data
      var data = [[51, 148, 60, 71, 34, 5, 1],
                  [ 10, 161, 80, 80, 12, 34, 53],
                  [175,  71, 16, 68, 0 , 0, 3],
                  [13, 990,  9, 69, 76, 35, 4],
                  [175,  71, 16, 68, 0 , 0, 3],
                  [13, 990,  9, 69, 76, 35, 4],
                  [51, 148, 60, 71, 34, 5, 1]];
  
      // Give this matrix to d3.chord()
      var chords = d3.chord()
          .padAngle(0.2) 
          .sortSubgroups(d3.ascending)
  
          // Use of chord.sortChords() Function
          .sortChords(d3.ascending)(data)
  
      svg.datum(chords)
          .append("g")
          .selectAll("g")
          .data(function (d) { return d.groups; })
          .enter()
          .append("g")
          .append("path")
          .style("fill", "purple")
          .style("stroke", "black")
          .attr("d", d3.arc()
              .innerRadius(170)
              .outerRadius(200)
              );
  
      svg.datum(chords)
          .append("g")
          .selectAll("path")
          .data(function (d) { return d; })
          .enter()
          .append("path")
          .attr("d", d3.ribbon()
              .radius(180)
              )
          .style("fill", "blue")
          .style("stroke", "black");
     
  
 

输出：

示例 2：

HTML

 
 

  
  
     
  
  
 
 
     
    GeeksForGeeks
  
    D3.js | chord.sortChords() Function
    
  
    
      // Create the svg area
      var svg = d3.select("#GFG")
          .append("svg")
          .attr("width", 400)
          .attr("height", 200)
          .append("g")
          .attr("transform", "translate(200,200)");
  
      // Create input data
      var data = [[0, 71, 89, 68, 71, 89, 68],
                  [ 11, 0, 60, 71, 9,  9, 0],
                  [ 10, 145, 0, 85, 145, 0, 85],
                  [ 13, 9,  9, 0, 0, 60, 71],
                  [ 13, 9,  9, 0, 0, 60, 71],
                  [ 10, 145, 0, 85, 145, 0, 85],
                  [0, 71, 89, 68, 71, 89, 68]];
  
      // 4 groups, so create a vector of 4 colors
      var colors_1 = [d3.schemeSet1[0], d3.schemeCategory10[1],
          d3.schemeCategory10[2], d3.schemeCategory10[3],
          d3.schemeCategory10[4], d3.schemeCategory10[5],
          d3.schemeCategory10[6]];
  
      var colors = [d3.schemeSet1[0], d3.schemeSet1[1],
          d3.schemeSet1[2], d3.schemeSet1[3],
          d3.schemeSet1[4], d3.schemeSet1[5],
          d3.schemeSet1[6]];
  
      // Give this matrix to d3.chord()
      var chords = d3.chord()
          .padAngle(0.2)
          .sortSubgroups(d3.ascending)
  
          // Use of chord.sortChords() Function
          .sortChords(d3.descending)(data)
  
      svg.datum(chords)
          .append("g")
          .selectAll("g")
          .data(function (d) { return d.groups; })
          .enter()
          .append("g")
          .append("path")
          .style("fill", function (d, i) {
              return colors[i] 
          })
          .style("stroke", "black")
          .attr("d", d3.arc()
              .innerRadius(150)
              .outerRadius(180)
          );
  
      svg.datum(chords)
          .append("g")
          .selectAll("path")
          .data(function (d) { return d; })
          .enter()
          .append("path")
          .attr("d", d3.ribbon()
              .radius(150)
              )
          .style("fill", function (d, i) {
              return colors_1[i] 
          })
          .style("stroke", "black");
     
  
 

输出：