JavaScript/D3.js 中带数字后缀键的数组排序教程

let data = [
  { key: "Location-9", values: 1 },
  { key: "Location-8", values: 5 },
  { key: "Location-7", values: 5 },
  { key: "Location-6", values: 5 },
  { key: "Location-5", values: 14 },
  { key: "Location-4", values: 10 },
  { key: "Location-3", values: 8 },
  { key: "Location-2", values: 6 },
  { key: "Location-16", values: 5 },
  { key: "Location-15", values: 2 },
  { key: "Location-14", values: 2 },
  { key: "Location-13", values: 2 },
  { key: "Location-12", values: 2 },
  { key: "Location-11", values: 2 },
  { key: "Location-10", values: 2 },
  { key: "Location-1", values: 15 }
];

data.forEach((element) => {
  // 假设key的格式总是 "前缀-数字"
  // 使用split('-')将字符串分割成数组，然后取第二个元素（索引为1）
  // 并使用Number()或parseInt()将其转换为数字类型
  element.id = Number(element.key.split("-")[1]);
});

console.log("添加ID后的数据示例：", data[0]);
// 预期输出： { key: "Location-9", values: 1, id: 9 }

let ascSort = [...data].sort((a, b) => {
  return a.id - b.id; // 小的在前，大的在后
});

console.log("升序排序结果：", ascSort.map(item => item.key));
// 预期输出示例：[ "Location-1", "Location-2", ..., "Location-10", ..., "Location-16" ]

let descSort = [...data].sort((a, b) => {
  return b.id - a.id; // 大的在前，小的在后
});

console.log("降序排序结果：", descSort.map(item => item.key));
// 预期输出示例：[ "Location-16", "Location-15", ..., "Location-1", ..., "Location-10" ]

data.forEach((element) => {
  delete element.id;
});

console.log("删除ID后的数据示例：", data[0]);
// 预期输出： { key: "Location-9", values: 1 }

let arr = [{
    key: "Location-9",
    values: 1
  },
  {
    key: "Location-8",
    values: 5
  },
  {
    key: "Location-7",
    values: 5
  },
  {
    key: "Location-6",
    values: 5
  },
  {
    key: "Location-5",
    values: 14
  },
  {
    key: "Location-4",
    values: 10
  },
  {
    key: "Location-3",
    values: 8
  },
  {
    key: "Location-2",
    values: 6
  },
  {
    key: "Location-16",
    values: 5
  },
  {
    key: "Location-15",
    values: 2
  },
  {
    key: "Location-14",
    values: 2
  },
  {
    key: "Location-13",
    values: 2
  },
  {
    key: "Location-12",
    values: 2
  },
  {
    key: "Location-11",
    values: 2
  },
  {
    key: "Location-10",
    values: 2
  },
  {
    key: "Location-1",
    values: 15
  }
];

// 1. 为每个元素添加用于排序的数字ID
arr.forEach((element) => {
  element.id = Number(element.key.split("-")[1]);
});

// 2. 进行排序操作
// 示例：按ID降序排序
let descSortedArr = [...arr].sort((a, b) => {
  return b.id - a.id;
});

// 示例：按ID升序排序
let ascSortedArr = [...arr].sort((a, b) => {
  return a.id - b.id;
});

// 3. (可选) 删除临时ID
arr.forEach((element) => {
  delete element.id;
});

console.log("原始数据（ID已删除）:", arr);
console.log("\n按ID降序排序后的结果（key值）：");
descSortedArr.forEach(item => console.log(item.key));

console.log("\n按ID升序排序后的结果（key值）：");
ascSortedArr.forEach(item => console.log(item.key));

// 假设 chartData 是您的原始数据数组，已按上述方法进行了正确排序
let sortedChartData = [...data].sort((a, b) => {
  // ... 您的排序逻辑，例如 b.id - a.id
  // 为了简洁，这里假设 data 已经被正确排序过了，或者直接在 d3.nest 前进行排序
  return Number(b.key.split("-")[1]) - Number(a.key.split("-")[1]);
});

// D3.js 的聚合操作可以在排序后的数据上进行
var LocationCount = d3.nest()
  .key(function(d) { return d.key; }) // 这里我们以完整的key作为分组依据
  .rollup(function(v) { return v.length; }) // 统计每个key出现的次数
  .entries(sortedChartData); // 使用排序后的数据

console.log("\nD3.js 聚合后的结果（已按Location ID降序排序）：", LocationCount);