javascript - 如何在javascript中以同心方形方式排列矩阵中的关系？

Question

如何以同心方形方式排列矩阵中的关系。？

这是想法。

我有几个人和他们的关系；

people = [
    {id:2332, person: 'jonathan', age: 20, type: 'origin'},
    {id:2311, person: 'maker', age: 34, type: 'relation'},
    {id:3423, person: 'toni', age: 23, type: 'relation'},
    {id:4523, person: 'lork', age: 65, type: 'sister'},
    {id:8756, person: 'caper', age: 34, type: 'relation'},
    {id:0983, person: 'april', age: 12, type: 'brother'},
    {id:1432, person: 'wisher', age: 45, type: 'friend'},
    {id:8736, person: 'kevin', age: 67, type: 'relation'},
    {id:9832, person: 'makeba', age: 23, type: 'friend'},
    {id:8923, person: 'ulbeth', age: 43, type: 'friend'},
    {id:0984, person: 'lapreth', age: 89, type: 'friend'},
    {id:1256, person: 'vlag', age: 76, type: 'friend'},
    {id:3409, person: 'lood', age: 42, type: 'relation'},
    {id:2342, person: 'kane', age: 35, type: 'uncle'},
    {id:3421, person: 'locket', age: 76, type: 'uncle'},
    {id:5423, person: 'cunnigan', age: 12, type: 'uncle'},
    {id:3343, person: 'mix', age: 76, type: 'relation'},
    {id:3409, person: 'pintola', age: 25, type: 'relation'},
    {id:0934, person: 'kudala', age: 54, type: 'relation'},
    {id:8412, person: 'lodask', age: 56, type: 'cousin'},
    {id:0784, person: 'late', age: 34, type: 'aunt'},
    {id:2316, person: 'kilem', age: 32, type: 'relation'},
    {id:9903, person: 'vloogi', age: 12, type: 'relation'},
]

relationships = [
    {source: 2332, target: 4523},
    {source: 2332, target: 3409},
    {source: 2332, target: 2311},
    {source: 2332, target: 9832},
    {source: 3409, target: 8923},
    {source: 1432, target: 3423},
    {source: 0983, target: 1256},
    {source: 0984, target: 9832},
    {source: 1256, target: 1256},
    {source: 8756, target: 8736},
    {source: 0983, target: 8756},
    {source: 9832, target: 0983},
    {source: 0983, target: 8412},
    {source: 0984, target: 1432},
    {source: 1256, target: 4523},
    {source: 8756, target: 8736},
    {source: 0983, target: 1256},
    {source: 9832, target: 3409},
        {source:2342, target: 3409},
    {source:3421, target: 3421},
    {source:5423, target: 1256},
    {source:3343, target: 3343},
    {source:3409, target: 8736},
    {source:0934, target: 1432},
    {source:8412, target: 8412},
    {source:0784, target: 0784},
    {source:2316, target: 0784},
    {source:9903, target: 9903},
]

这是二维矩阵的代码：

var matrix = [];
for(var i=0; I<size; i++) {
    matrix[i] = [];
    for(var j=0; j<size; j++) {
        matrix[i][j] = undefined;
    }
}

从上面的矩阵中，我们找到了中心单元并[i,j]在下面的代码中将其地址分配为中心

      let center = this.getCentralCellAddressFromMatrix();

      function generate([cRow, cCol], space) {
        const topRow = Array.from(Array(space * 2 + 1), (_, i) => [
          cRow - space,
          cCol - space + i,
        ]);
        const bottomRow = Array.from(Array(space * 2 + 1), (_, i) => [
          cRow + space,
          cCol - space + i,
        ]);
        const leftCol = Array.from(Array(space * 2 + 1 - 2), (_, i) => [
          cRow - space + i,
          cCol - space,
        ]);
        const rightCol = Array.from(Array(space * 2 + 1 - 2), (_, i) => [
          cRow + space + i,
          cCol + space,
        ]);
        return [].concat(topRow, bottomRow, leftCol, rightCol);
      }

我想要实现的目标如下：

1. 首先，我们将类型为“origin”的人固定为矩阵的中心。

2. 然后将他的关系安排在他周围的同心正方形中。（请注意，我们应该考虑单条同心单元格（下图中以蓝色突出显示）。如果他的关系计数大于同心单元格数，则移动到下一个级别... && 等等...

3. 一旦你完成了他的关系....移动到下一个级别（即'origin'人的关系的关系。再次在这里你遵循与上面提到的相同的模式（比如将每个关系保持为原点=>然后在那个周围找到同心方形条）人 && 安排它的关系在它周围的无人居住的单元格中......）

4. 同样，我们遍历整个地图，直到安排好所有关系。

标签： javascript