我正在开发一个游戏，其中包含通过扭曲连接的地图（命名通道）。每个通道都有一个ID（int），每个扭曲都具有一个通道源ID（int）和一个通道目标ID（int）。通道可以具有无限数量的扭曲，也可以完全没有扭曲。
我构建了一个管理应用程序（使用Zend Expressive / php和HTML），该应用程序从API作为JSON获取通道数据。然后将此JSON解析为仅包含重要数据的简化类。
我试图以网格形式可视化数据，以确定世界的边界。
我尝试使用固定大小和顺序的div对其进行可视化。不幸的是，我不知道如何处理可变数目的邻居。在放置扭曲的地方有可用的坐标，但是我想要一个更抽象的世界视图。我只希望每个通道都由一个固定大小的2D多维数据集（具有固定宽度和高度的div）表示。
频道课程
<?php
namespace App\Entity;
class Channel
{
protected $id;
protected $neighbourIds = [];
public function parseData(array $data)
{
$this->setId($data['id']);
foreach($data['warps'] as $warp) {
$this->addNeighbourId($warp['targetChannelId']);
}
}
/**
* @return mixed
*/
public function getId()
{
return $this->id;
}
/**
* @param mixed $id
*/
public function setId($id): void
{
$this->id = $id;
}
public function addNeighbourId($neighbourId)
{
$this->neighbourIds[] = $neighbourId;
}
/**
* @return mixed
*/
public function getNeighbourIds()
{
return $this->neighbourIds;
}
/**
* @param mixed $neighbours
*/
public function setNeighbours($neighbours): void
{
$this->neighbours = $neighbours;
}
}
将通道中的数据采样为print_r输出
Array
(
[0] => App\Entity\Channel Object
(
[id:protected] => 1
[neighbourIds:protected] => Array
(
[0] => 2
[1] => 4
[2] => 5
[3] => 121
)
)
[1] => App\Entity\Channel Object
(
[id:protected] => 4
[neighbourIds:protected] => Array
(
[0] => 1
)
)
[2] => App\Entity\Channel Object
(
[id:protected] => 5
[neighbourIds:protected] => Array
(
[0] => 1
)
)
[3] => App\Entity\Channel Object
(
[id:protected] => 2
[neighbourIds:protected] => Array
(
[0] => 1
[1] => 3
[2] => 133
[3] => 138
[4] => 152
[5] => 175
[6] => 176
)
)
[4] => App\Entity\Channel Object
(
[id:protected] => 3
[neighbourIds:protected] => Array
(
[0] => 2
[1] => 126
[2] => 132
[3] => 137
)
)
[5] => App\Entity\Channel Object
(
[id:protected] => 121
[neighbourIds:protected] => Array
(
[0] => 1
[1] => 122
[2] => 139
[3] => 144
)
)
[6] => App\Entity\Channel Object
(
[id:protected] => 122
[neighbourIds:protected] => Array
(
[0] => 121
[1] => 123
[2] => 140
[3] => 145
)
)
[7] => App\Entity\Channel Object
(
[id:protected] => 123
[neighbourIds:protected] => Array
(
[0] => 122
[1] => 124
[2] => 141
[3] => 146
)
)
[8] => App\Entity\Channel Object
(
[id:protected] => 124
[neighbourIds:protected] => Array
(
[0] => 123
[1] => 125
[2] => 142
[3] => 147
)
)
[9] => App\Entity\Channel Object
(
[id:protected] => 125
[neighbourIds:protected] => Array
(
[0] => 124
[1] => 143
[2] => 148
)
)
[10] => App\Entity\Channel Object
(
[id:protected] => 126
[neighbourIds:protected] => Array
(
[0] => 3
[1] => 127
[2] => 131
[3] => 136
)
)
[11] => App\Entity\Channel Object
(
[id:protected] => 127
[neighbourIds:protected] => Array
(
[0] => 126
[1] => 128
[2] => 130
[3] => 135
)
)
[12] => App\Entity\Channel Object
(
[id:protected] => 128
[neighbourIds:protected] => Array
(
[0] => 127
[1] => 129
[2] => 134
)
)
[13] => App\Entity\Channel Object
(
[id:protected] => 129
[neighbourIds:protected] => Array
(
[0] => 130
[1] => 128
)
)
[14] => App\Entity\Channel Object
(
[id:protected] => 130
[neighbourIds:protected] => Array
(
[0] => 129
[1] => 131
[2] => 127
)
)
[15] => App\Entity\Channel Object
(
[id:protected] => 131
[neighbourIds:protected] => Array
(
[0] => 130
[1] => 132
[2] => 126
)
)
[16] => App\Entity\Channel Object
(
[id:protected] => 132
[neighbourIds:protected] => Array
(
[0] => 131
[1] => 133
[2] => 3
)
)
[17] => App\Entity\Channel Object
(
[id:protected] => 133
[neighbourIds:protected] => Array
(
[0] => 132
[1] => 2
)
)
[18] => App\Entity\Channel Object
(
[id:protected] => 134
[neighbourIds:protected] => Array
(
[0] => 135
[1] => 128
)
)
[19] => App\Entity\Channel Object
(
[id:protected] => 135
[neighbourIds:protected] => Array
(
[0] => 134
[1] => 136
[2] => 127
)
)
[20] => App\Entity\Channel Object
(
[id:protected] => 136
[neighbourIds:protected] => Array
(
[0] => 135
[1] => 137
[2] => 126
)
)
[21] => App\Entity\Channel Object
(
[id:protected] => 137
[neighbourIds:protected] => Array
(
[0] => 136
[1] => 138
[2] => 3
)
)
[22] => App\Entity\Channel Object
(
[id:protected] => 138
[neighbourIds:protected] => Array
(
[0] => 137
[1] => 2
)
)
[23] => App\Entity\Channel Object
(
[id:protected] => 139
[neighbourIds:protected] => Array
(
[0] => 140
[1] => 121
)
)
[24] => App\Entity\Channel Object
(
[id:protected] => 140
[neighbourIds:protected] => Array
(
[0] => 139
[1] => 141
[2] => 122
)
)
[25] => App\Entity\Channel Object
(
[id:protected] => 141
[neighbourIds:protected] => Array
(
[0] => 140
[1] => 142
[2] => 123
)
)
[26] => App\Entity\Channel Object
(
[id:protected] => 142
[neighbourIds:protected] => Array
(
[0] => 141
[1] => 143
[2] => 124
)
)
[27] => App\Entity\Channel Object
(
[id:protected] => 143
[neighbourIds:protected] => Array
(
[0] => 142
[1] => 125
)
)
[28] => App\Entity\Channel Object
(
[id:protected] => 144
[neighbourIds:protected] => Array
(
[0] => 145
[1] => 121
)
)
[29] => App\Entity\Channel Object
(
[id:protected] => 145
[neighbourIds:protected] => Array
(
[0] => 144
[1] => 146
[2] => 122
)
)
[30] => App\Entity\Channel Object
(
[id:protected] => 146
[neighbourIds:protected] => Array
(
[0] => 145
[1] => 147
[2] => 123
)
)
[31] => App\Entity\Channel Object
(
[id:protected] => 147
[neighbourIds:protected] => Array
(
[0] => 146
[1] => 148
[2] => 124
)
)
[32] => App\Entity\Channel Object
(
[id:protected] => 148
[neighbourIds:protected] => Array
(
[0] => 147
[1] => 125
)
)
[33] => App\Entity\Channel Object
(
[id:protected] => 152
[neighbourIds:protected] => Array
(
[0] => 2
)
)
[34] => App\Entity\Channel Object
(
[id:protected] => 175
[neighbourIds:protected] => Array
(
[0] => 2
)
)
[35] => App\Entity\Channel Object
(
[id:protected] => 176
[neighbourIds:protected] => Array
(
[0] => 2
)
)
)
我希望有一种网格能够可视化相关的渠道，以实现数据的管理（删除，扩展等）。我的问题仅涉及可视化部分。