关于d3.sort()升序与降序排序输出顺序的疑问

结论 #

你看到的排序输出完全符合D3 v7的预期行为，差异源于d3.ascending/d3.descending对NaN、undefined的比较逻辑，以及JavaScript原生排序的特性。

核心原因解析 #

1. D3排序函数的比较规则 #

D3的d3.ascending和d3.descending底层逻辑如下（简化版）：

// d3.ascending
function ascending(a, b) {
  return a < b ? -1 : a > b ? 1 : 0;
}

// d3.descending
function descending(a, b) {
  return b < a ? -1 : b > a ? 1 : 0;
}

• 对于正常数字，按升序/降序返回比较结果；
• 当涉及NaN或undefined时：
  • JavaScript中NaN与任何值比较结果都是false，undefined和数字比较会被转为NaN，同样所有比较结果为false；
  • 因此排序函数会返回0，即认为这两个元素“相等”。

2. JavaScript Array.sort()的稳定排序特性 #

ES2019及之后，Array.sort()是稳定排序：当排序函数返回0时，会保留元素在原数组中的相对位置。这直接导致了NaN、undefined的最终位置和它们在原数组中的初始位置相关：

• 测试用例3（升序）：原数组[10,NaN,2,3,7]中，NaN在10之后，排序时有效数字按升序排列，NaN因和10比较返回0，保留原顺序，得到[2,3,7,10,NaN]；
• 测试用例4（降序）：同样原数组，10和NaN比较返回0，保留原顺序，有效数字按降序排列，得到[10,NaN,7,3,2]；
• 测试用例5、6中，undefined与所有元素比较均返回0，最终位置由原数组初始顺序决定，同时有效数字按升序/降序排列。

额外说明 #

如果需要将NaN、undefined统一排到末尾（或开头），可以自定义排序函数，例如：

// 升序，NaN/undefined排末尾
function customAscending(a, b) {
  if (a == null || isNaN(a)) return 1;
  if (b == null || isNaN(b)) return -1;
  return a < b ? -1 : a > b ? 1 : 0;
}

内容的提问来源于stack exchange，提问作者aashima