根据值对二维数组排序

Question

我有一个巨大的二维数组，带有六角形顶点的坐标。 看起来像这样：

let arr = [
  [150.3073578016,95.9815785601,149.1526572632,97.9815785601,150.3073578016,99.9815785601,152.6167588783,99.9815785601,153.7714594167,97.9815785601,152.6167588783,95.9815785601],
  [120.5738189383,54.4815785601,121.7285194767,54.4815785601,122.3058697459,55.4815785601,121.7285194767,56.4815785601,120.5738189383,56.4815785601,119.9964686691,55.4815785601],
  [119.9964686691,78.4815785601,122.3058697459,78.4815785601,123.4605702842,80.4815785601,122.3058697459,82.4815785601,119.9964686691,82.4815785601,118.8417681307,80.4815785601],
  [115.6663416502,100.9815785601,117.9757427269,100.9815785601,119.1304432653,102.9815785601,117.9757427269,104.9815785601,115.6663416502,104.9815785601,114.5116411118,102.9815785601],
  [124.326595688,100.9815785601,126.6359967648,100.9815785601,127.7906973032,102.9815785601,126.6359967648,104.9815785601,124.326595688,104.9815785601,123.1718951496,102.9815785601],
];

六角形有6个顶点。每个子数组都是一个六边形，并具有每个顶点的x和y坐标。

所以每个子数组包含12个值。

注意：并非所有六边形都具有相同的大小！

结构如下（ unsorted ！）：[x,y,x,y,x,y,x,y,x,y,x,y];

我现在的问题是：如何对2d数组排序，以使其按行从左上角到右下角排序？

我的想法是仅对每个子值求和，但是并没有给我想要的顺序。

function sortHexagons(hexCoordinates) {
  function sort(arr) {
    const reducer = (accumulator, currentValue) => accumulator + currentValue;
    return arr.reduce(reducer);
  }
  hexCoordinates.sort((a, b) => sort(a) - sort(b));
}

Answer 1

这是未经测试的尝试。我平均每个六角形的x和y值，然后按y降序排列，然后按x升序排列。对六角形的均匀性进行假设。

    var arr = [
    [150.3073578016,95.9815785601,149.1526572632,97.9815785601,150.3073578016,99.9815785601,152.6167588783,99.9815785601,153.7714594167,97.9815785601,152.6167588783,95.9815785601],
    [120.5738189383,54.4815785601,121.7285194767,54.4815785601,122.3058697459,55.4815785601,121.7285194767,56.4815785601,120.5738189383,56.4815785601,119.9964686691,55.4815785601],
    [119.9964686691,78.4815785601,122.3058697459,78.4815785601,123.4605702842,80.4815785601,122.3058697459,82.4815785601,119.9964686691,82.4815785601,118.8417681307,80.4815785601],
    [115.6663416502,100.9815785601,117.9757427269,100.9815785601,119.1304432653,102.9815785601,117.9757427269,104.9815785601,115.6663416502,104.9815785601,114.5116411118,102.9815785601],
    [124.326595688,100.9815785601,126.6359967648,100.9815785601,127.7906973032,102.9815785601,126.6359967648,104.9815785601,124.326595688,104.9815785601,123.1718951496,102.9815785601],
  ];

// get the average x and y values of each array
var averageTracker = []
for (let x = 0; x < arr.length; x++) {
    var xSum = 0;
    var ySum = 0;
    for (let y = 0; y < arr[x].length; y++) {
        if (y % 2 == 0) {
            xSum = xSum + arr[x][y];
        } else {
            ySum = ySum + arr[x][y];
        }
    }
    // save the average x and y value of a hexagon against the index of the hexagon
    var indexTracker = {
        arrayPosition: x,
        xAverage: xSum / (arr[x].length / 2),
        yAverage: ySum / (arr[x].length / 2),
    };
    averageTracker.push(indexTracker);
}

// sort the hexagons by y descending, followed by x ascending
averageTracker.sort(function (a, b) {
    return b.yAverage - a.yAverage || a.xAverage - b.xAverage;
});

// get the hexagon out of the original array by index
var newArr = [];
for (let x = 0; x < averageTracker.length; x++) {
    newArr.push(arr[averageTracker[x].arrayPosition]);
}

Answer 2

如果您将此代码用作纯JavaScript，则需要为lodash库添加CDN 或者您使用的是JavaScript框架和库，则需要安装lodash

$ yarn add lodash / npm install lodash

在当前页面或组件上使用lodash使用

const _ = require('lodash'); or import * as _ from 'lodash';

你很好走

const coordinatesArray = _.map(arr, (row) => {
  // convert every row element into chank of two element
  const coordinates = _.chunk(row, 2)
  // convert coordinates into readable form using x and y axis
  return _.map(coordinates, (i) => ({ x: i[0], y: i[1] }))
})
const sortedCoordinates = _.map(coordinatesArray, (row) => {
  // sort array based on x axis you can change ASC DESC
  return _.sortBy(row, 'x')
})
const sortHexagons = _.map(sortedCoordinates, (row) => {
  const newrow = []
  // deconstruct corrdinated into array of array form to get desicre result
  _.map(row, (i) => {
    // deconstruction on coordination
    newrow.push(i.x)
    newrow.push(i.y)
  })
  return newrow
})
// required result 
console.log(sortHexagons)