D3.js双表排序仅在Chrome浏览器异常的问题排查与修复

为什么Chrome会出问题？ #

你的代码里连续调用了两次sort()，这个逻辑的隐患刚好撞上了Chrome和其他浏览器的排序算法差异：

1. 连续排序的逻辑漏洞：你先按DQI_FROM_SPEC排序，再按AREA排序——本质是想实现「当AREA相同时，保留DQI_FROM_SPEC的升序顺序」。但这个效果只有当排序算法是稳定排序时才成立：稳定排序会保证相同键值的元素不打乱原有顺序，而不稳定排序会随机打乱。
2. 浏览器引擎的差异：Firefox等浏览器用的是稳定排序算法，所以第二次排序AREA时，相同AREA的元素还能保留第一次DQI_FROM_SPEC的排序结果；但Chrome的V8引擎在处理部分数组排序时（比如早期用快速排序，或是对大数组的优化）用了不稳定排序，直接打乱了之前的顺序，导致结果异常。

另外也可以排查下数据类型：如果DQI_FROM_SPEC或AREA是字符串格式的数字，d3.ascending会按字符串字典序比较，这也可能在不同浏览器出现差异，但结合你的描述，排序稳定性的问题是核心原因。

怎么修复？ #

把两个排序条件合并到一个sort()函数里，这样不管浏览器用什么排序算法，结果都会一致。根据你的代码逻辑（最终按AREA升序，AREA相同时按DQI_FROM_SPEC升序），修改后的代码如下：

}).done( function (response) {
  response.sort(function(x, y){
    // 先比较AREA，返回非0值就直接用这个结果
    const areaDiff = d3.ascending(x.AREA, y.AREA);
    if (areaDiff !== 0) {
      return areaDiff;
    }
    // AREA相等时，再比较DQI_FROM_SPEC
    return d3.ascending(x.DQI_FROM_SPEC, y.DQI_FROM_SPEC);
  });
});

如果你实际想要的是先按DQI_FROM_SPEC排序，再按AREA排序（也就是DQI_FROM_SPEC是第一优先级），只需要调换两个比较的顺序：

}).done( function (response) {
  response.sort(function(x, y){
    const dqiDiff = d3.ascending(x.DQI_FROM_SPEC, y.DQI_FROM_SPEC);
    if (dqiDiff !== 0) {
      return dqiDiff;
    }
    return d3.ascending(x.AREA, y.AREA);
  });
});

额外提醒 #

• 确认接口返回的DQI_FROM_SPEC和AREA是数字类型，如果是字符串，记得先转成数字（比如用+x.AREA），避免字符串字典序排序导致的异常。
• d3.ascending已经处理了null或undefined的情况，但如果数据里有异常值，最好提前做校验哦。

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