D3.js chord.sortGroups() 函数

chord.sortGroups() 函数是 D3.js 库中用于排序和调整弦图组的方法。它允许你通过指定 sortGroups 函数来重新排列弦图中的组，以改善可视化的阅读性。

语法

chord.sortGroups([compare])

参数

• compare：可选。一个排序函数，用于比较两个组的大小。这个函数的默认值是 null，这意味着不排序。

返回值

无返回值。

示例

const matrix = [
  [11975,  5871, 8916, 2868],
  [ 1951, 10048, 2060, 6171],
  [ 8010, 16145, 8090, 8045],
  [ 1013,   990,  940, 6907]
];

const svg = d3.select('svg');
const width = +svg.attr('width');
const height = +svg.attr('height');
const outerRadius = Math.min(width, height) * 0.5 - 40;
const innerRadius = outerRadius - 30;

const chords = d3.chord()
  .padAngle(0.05)
  .sortGroups(d3.descending)
  .sortSubgroups(d3.ascending)
  .sortChords(d3.ascending)
  (matrix);

const group = svg.append('g')
  .attr('transform', `translate(${width / 2}, ${height / 2})`)
  .datum(chords);

group.append('g')
    .attr('class', 'groups')
    .selectAll('g')
    .data(chords.groups)
    .enter().append('g')
    .append('path')
    	  .style('fill', d => color(d.index))
    	  .style('stroke', d => color(d.index))
    	  .attr('d', arc);

function arc(d) {
  const angle = (d.endAngle - d.startAngle) / d.value;
  return `
    M ${innerRadius * Math.cos(d.startAngle)}, ${innerRadius * Math.sin(d.startAngle)}
    A ${innerRadius}, ${innerRadius}, 0, 0, 1,
      ${innerRadius * Math.cos(d.endAngle)}, ${innerRadius * Math.sin(d.endAngle)}
    L ${outerRadius * Math.cos(d.endAngle)}, ${outerRadius * Math.sin(d.endAngle)}
    A ${outerRadius}, ${outerRadius}, 0, 0, 0,
      ${outerRadius * Math.cos(d.startAngle)}, ${outerRadius * Math.sin(d.startAngle)}
    L ${innerRadius * Math.cos(d.startAngle)}, ${innerRadius * Math.sin(d.startAngle)}
    Z
  `;
}

以上示例显示了如何在弦图中使用 chord.sortGroups() 函数。这里我们使用默认值，不使用排序功能。但是，我们可以传递一个比较函数来对组进行排序。如下所示：

chord.sortGroups(d3.descending)

通过这个命令，将组按降序排序。

经验技巧

• chord.sortGroups() 函数可以与其他 chord 函数一起使用，如 chord.padAngle()、chord.sortSubgroups()和chord.sortChords()。
• 可以传递自定义排序函数来根据您的需求定制排序规则。

参考资料

• D3.js官方文档-chord.sortGroups()