D3.js chord.sortChords()函数介绍

D3.js是一个基于数据的可视化JavaScript库，用于在Web浏览器中创建交互式和动态的图表。chord.sortChords()是D3.js中的一个函数，它用于指定和弦图（Chord chart）中弦的排序方式。

语法

chord.sortChords(compareFunction)

参数

compareFunction 是可选的，是一个比较函数，用于指定弦的排序方式。如果没有指定该参数，则默认按照弦的大小进行排序。

返回值

该函数没有返回值，它会在和弦图中对弦进行排序并重新布局。

使用方法

chord.sortChords()函数经常与chord.matrix()函数一起使用，该函数用于生成和弦图的数据矩阵。可以在数据矩阵生成之后，通过chord.sortChords()函数指定弦的排序方式，最后将数据矩阵输入到和弦图布局函数中进行布局。

// 定义和弦图的布局函数
var layout = d3.chord()
    .padAngle(0.05)
    .sortSubgroups(d3.descending); // 指定子群间的排序方式

// 生成和弦图数据矩阵
var matrix = [
  [11975, 5871, 8916, 2868],
  [1951, 10048, 2060, 6171],
  [8010, 16145, 8090, 8045],
  [1013, 990, 940, 6907]
];

// 对矩阵中的弦进行排序
layout.sortChords(d3.descending);

// 将数据矩阵输入到和弦图布局函数中进行布局
var chords = layout(matrix);

// 在SVG中绘制和弦图
var svg = d3.select("body").append("svg")
    .attr("width", width)
    .attr("height", height)
  .append("g")
    .attr("transform", "translate(" + width / 2 + "," + height / 2 + ")");

// 绘制和弦
svg.selectAll(".arc")
    .data(chords.groups)
  .enter().append("path")
    .attr("class", "arc")
    .style("fill", function(d) { return color(d.index); })
    .attr("d", d3.arc()
        .innerRadius(innerRadius)
        .outerRadius(outerRadius))
  .append("title")
    .text(function(d) { return names[d.index]; });

// 绘制连接线
svg.selectAll(".chord")
    .data(chords)
  .enter().append("path")
    .attr("class", "chord")
    .style("fill", function(d) { return color(d.source.index); })
    .attr("d", d3.ribbon()
        .radius(innerRadius))
  .append("title")
    .text(function(d) { return names[d.source.index] + " ↔ " + names[d.target.index] + ": " + d.source.value; });

上面的代码指定了布局函数中子群间的排序方式为降序排列。最后生成的和弦图中，每个弦都按降序排列。如果没有指定子群间的排序方式，则默认按照子群的大小从大到小排序。

注意事项

• chord.sortChords()函数必须在和弦图的数据矩阵生成之后，布局函数执行之前调用。
• compareFunction是可选的，如果不指定，则默认按照弦的大小进行排序。
• compareFunction函数的返回值必须是一个数字，表示比较结果。返回值小于0，则a排在b前面；返回值等于0，则不改变a和b的顺序；返回值大于0，则a排在b后面。