如何使用D3.js对多层映射(Map-of-Maps)层级结构实现多维度排序

我明白你现在卡在了不同层级用不同规则排序的环节上——毕竟d3.hierarchy的sort默认是统一规则，要针对大洲、国家、城市分别用降序、升序、降序确实需要做点特殊处理。其实核心思路就是根据节点的深度（depth）来区分不同层级，然后应用对应的排序逻辑，下面给你详细拆解：

先理清楚映射转层级后的结构 #

你用d3.group生成的三层Map结构，转成d3.hierarchy后，每个节点的data都是[key, value]的数组：

• 根节点（depth=0）的子节点是大洲节点（depth=1），它们的data[0]是大洲名称，data[1]是对应国家的Map
• 大洲节点的子节点是国家节点（depth=2），data[0]是国家名称，data[1]是对应城市的Map
• 国家节点的子节点是城市节点（depth=3），data[0]是城市名称，data[1]是该城市的原始数据数组（这里每个城市只有一条数据，所以取[0]就能拿到population）

实现分层排序的代码 #

只需要在sort回调里判断当前节点的depth，然后分别应用排序规则即可，而且只需要调用一次sort，它会递归处理所有子层级：

// 你的初始代码
let mappedData = d3.group(csvData, d => d.continent, d => d.country, d => d.city);
let d3hierarchy = d3.hierarchy(mappedData);

// 核心：分层排序逻辑
d3hierarchy.sort((a, b) => {
  if (a.depth === 1) {
    // 大洲层级：降序排序
    return d3.descending(a.data[0], b.data[0]);
  } else if (a.depth === 2) {
    // 国家层级：升序排序
    return d3.ascending(a.data[0], b.data[0]);
  } else if (a.depth === 3) {
    // 城市层级：按人口降序，记得把population转成数字避免字符串排序错误
    const popA = +a.data[1][0].population;
    const popB = +b.data[1][0].population;
    return d3.descending(popA, popB);
  }
  // 根节点不需要排序，返回0即可
  return 0;
});

关键细节说明 #

1. depth的判断：d3.hierarchy的depth属性是固定的，根节点为0，每往下一层加1，所以用它判断层级非常可靠。
2. 城市排序的注意点：一定要把population转成数字类型（用+号），如果直接用字符串排序，像"120303"和"232324"这种，字符串比较会认为"1"开头的更小，和实际人口大小不符。
3. 递归排序：d3.hierarchy的sort方法会自动递归处理所有子节点，所以不用单独给每个大洲或者国家节点调用sort，一次调用就搞定所有层级。

如果你喜欢用switch-case的写法，也可以改成下面这样，逻辑是完全一样的：

d3hierarchy.sort((a, b) => {
  switch(a.depth) {
    case 1:
      return d3.descending(a.data[0], b.data[0]);
    case 2:
      return d3.ascending(a.data[0], b.data[0]);
    case 3:
      return d3.descending(+a.data[1][0].population, +b.data[1][0].population);
    default:
      return 0;
  }
});

这样就能完美实现你要的：大洲降序、国家升序、城市按人口降序的多层排序效果啦！

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