替代d3.ascending/d3.descending实现自定义X轴列排序的方法

这个问题的核心是d3.ascending采用字符串字典序排序，和你需要的时间逻辑顺序不匹配——比如"2014"的首字符"2"的ASCII码小于"end of 2013"的"e"，所以会被排在前面。下面给你两种直接可行的解决方案：

方法1：基于预设顺序数组的自定义排序函数 #

直接定义你想要的目标顺序，然后通过元素在数组中的索引来实现排序，这是最直观的方式：

// 第一步：定义你需要的精确排序顺序
const desiredOrder = ["start of 2013", "end of 2013", "2014", "2015", "2016"];

// 第二步：替换原有的d3.ascending排序逻辑
var d_sequence = sequenceSet.values().sort((a, b) => {
  // 比较两个元素在目标数组中的索引差
  return desiredOrder.indexOf(a) - desiredOrder.indexOf(b);
});

var d_categories = categorySet.values().sort((a, b) => {
  return desiredOrder.indexOf(a) - desiredOrder.indexOf(b);
});

扩展：处理额外的未预设元素 #

如果你的数据中可能存在不在desiredOrder里的年份项，可以优化排序函数，把这些额外项放到末尾（或按字典序排序）：

.sort((a, b) => {
  const indexA = desiredOrder.indexOf(a);
  const indexB = desiredOrder.indexOf(b);
  
  // 两个元素都不在预设数组：按原字典序排序
  if (indexA === -1 && indexB === -1) return d3.ascending(a, b);
  // 只有a不在：把a放到后面
  if (indexA === -1) return 1;
  // 只有b不在：把b放到后面
  if (indexB === -1) return -1;
  // 都在预设数组：按索引差排序
  return indexA - indexB;
});

方法2：给数据添加排序权重字段（可选） #

如果你的数据源可以修改，也可以在预处理阶段给每个年份项添加一个排序权重，比如：

// 假设你的原始数据是类似这样的结构
const rawData = [
  { period: "start of 2013", weight: 1 },
  { period: "end of 2013", weight: 2 },
  { period: "2014", weight: 3 },
  // ...其他数据
];

// 排序时根据weight字段排序
var d_sequence = sequenceSet.values().sort((a, b) => {
  // 这里需要确保a和b能对应到rawData中的weight值
  const weightA = rawData.find(item => item.period === a).weight;
  const weightB = rawData.find(item => item.period === b).weight;
  return weightA - weightB;
});

这个方法适合数据结构更复杂的场景，但需要额外的预处理步骤，相比方法1稍显繁琐。

替换上述代码后，你的X轴列就会严格按照["start of 2013", "end of 2013", "2014", "2015", "2016"]的顺序显示了。

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