D3.js chord()函数

D3.js中的d3.chord()函数用于返回使用默认设置构造的新和弦布局。

句法：

d3.chord()

参数：此函数不接受任何参数。

返回值：此函数返回构造的新和弦布局。

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

示例 1：

HTML

  
  


  
    GeeksForGeeks
  
    D3.js | d3.chord() Function
    
  
    
      // Create the svg area
      var svg = d3.select("#GFG")
        .append("svg")
        .attr("width", 340)
        .attr("height", 340)
        .append("g")
        .attr("transform", "translate(170,170)")
  
      // Create input data
      var data = [[8010, 16145, 8090, 8045],
      [1013, 990, 940, 6907],
      [11975, 5871, 8916, 2868],
      [1951, 10048, 2060, 6171]];
  
      // Give this matrix to d3.chord()
      var chords = d3.chord()
        .padAngle(0.05)
        (data)
  
      // Add the groups on the inner part 
      // of the circle
      svg.datum(chords)
        .append("g")
        .selectAll("g")
        .data(function (d) { return d.groups; })
        .enter()
        .append("g")
        .append("path")
        .style("fill", "black")
        .style("stroke", "black")
        .attr("d", d3.arc()
          .innerRadius(150)
          .outerRadius(160)
        )
  
      // Add the links between groups
      svg.datum(chords)
        .append("g")
        .selectAll("path")
        .data(function (d) { return d; })
        .enter()
        .append("path")
        .attr("d", d3.ribbon()
          .radius(150)
        )
        .style("fill", "#32a852")
        .style("stroke", "black");
    
  

输出：

示例 2：

HTML

  
  
  
  
  
  
  
  


  
    GeeksForGeeks
  
    D3.js | d3.chord() Function
    
  
    
      // Create the svg area
      var svg = d3.select("#GFG")
        .append("svg")
        .attr("width", 340)
        .attr("height", 340)
        .append("g")
        .attr("transform", "translate(170,170)")
  
      // Create input data
      var data = [[0, 5871, 8916, 2868],
      [1951, 0, 2060, 6171],
      [8010, 16145, 0, 8045],
      [1013, 990, 940, 0]];
  
      // 4 groups, so create a vector of 4 colors
      var colors =
          [d3.schemeDark2[0], d3.schemeDark2[1],
           d3.schemeDark2[2], d3.schemeDark2[3]];
  
      // Give this matrix to d3.chord()
      var chords = d3.chord()
        .padAngle(0.175)
        .sortSubgroups(d3.ascending)
        (data)
  
      // Add the groups on the inner part 
      // of the circle
      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(160)
        )
  
      // Add the links between groups
      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) {
          return (colors[d.source.index])
        })
        .style("stroke", "black");
    
  

输出：