Javascript 如何在屏幕上对网络中的对象进行分组？_Javascript_Algorithm_Artificial Intelligence

Javascript 如何在屏幕上对网络中的对象进行分组？

javascript algorithm artificial-intelligence

Javascript 如何在屏幕上对网络中的对象进行分组？,javascript,algorithm,artificial-intelligence,Javascript,Algorithm,Artificial Intelligence,我正在模拟思考和记忆的过程，我有各种各样的图片（奶牛、飞机、橙色），需要以思维导图的方式显示在屏幕上。每个对象也连接到其他三个对象，并且它需要看起来像一个网络我可以使用什么算法？另外，我使用的是JS，但伪代码或解释也不错。首先，将数据放入可用的结构中：按顺序绘制节点，同时绘制ID大于当前节点的同级节点您需要在当前节点周围以120度偏移绘制兄弟节点，以创建web（3个兄弟节点，360/3=120）下面是一些JavaScript示例 // initialize your data var

我正在模拟思考和记忆的过程，我有各种各样的图片（奶牛、飞机、橙色），需要以思维导图的方式显示在屏幕上。每个对象也连接到其他三个对象，并且它需要看起来像一个网络

我可以使用什么算法？另外，我使用的是JS，但伪代码或解释也不错。

首先，将数据放入可用的结构中：
按顺序绘制节点，同时绘制ID大于当前节点的同级节点
您需要在当前节点周围以120度偏移绘制兄弟节点，以创建web（3个兄弟节点，360/3=120）

下面是一些JavaScript示例

// initialize your data
var nodes = {
    1: {src: "imageA", siblings: [2,3,4]},
    2: {src: "imageB", siblings: [1,5,6]},
    3: {src: "imageC", siblings: [1,7,8]},
    4: {src: "imageD", siblings: [1,9,10]},
    5: {src: "imageE", siblings: [2]},
    6: {src: "imageF", siblings: [2]},
    7: {src: "imageG", siblings: [3]},
    8: {src: "imageH", siblings: [3]},
    9: {src: "imageI", siblings: [4]},
    10: {src: "imageJ", siblings: [4]},
}

// initialize some constats we will use
var DIST = 200; //pixel distance between images
var IMGW = 64; // image width
var IMGH = 64; // image height
var SCX = 400; // center screen x position
var SCY = 400; // center screen y position
var DEGSSTART = 90; // starting degrees offset
var DEGFLIP = 180; // add to flip the direction
var DEGSTEP = 120; // circle 360 / 3
// note: if you have more than 3 siblings change DEGSTEP appropriately

// the main function
function drawWeb(nodes, id, cx, cy, prevDeg) {
 var node = nodes[id];
 // draw the current node/image
 var xOff = cx - (IMGW / 2);
 var yOff = cy - (IMGH / 2);
 drawImage(node.src, Math.round(xOff), Math.round(yOff));
 // draw the siblings recursively
 var newDeg = prevDeg + DEGFLIP + DEGSTEP; 
 for(var i=0; i<node.siblings.length; i++) {
  var newId = node.siblings[i];
  if(newId > id) {
   // convert to radians and calc new location
   var rad = newDeg * Math.PI / 180;
   var newCX = cx + DIST * Math.cos(rad);
   var newCY = cy + DIST * Math.sin(rad);
   drawWeb(nodes, newId, newCX, newCY, newDeg);
   newDeg += DEGSTEP;
  }
 }
}

// the draw function you can customize
// use jquery or some other method
function drawImage(src, x, y) {
 // fill in code to put an image on your screen
 console.log(src + ': ' + x + ', ' + y);
}

// test
drawWeb(nodes, 1, SCX, SCY, 90);

//初始化数据
变量节点={
1:{src:“imageA”，兄弟姐妹：[2,3,4]}，
2:{src:“imageB”，兄弟姐妹：[1,5,6]}，
3:{src:“imageC”，兄弟姐妹：[1,7,8]}，
4:{src:“imageD”，兄弟姐妹：[1,9,10]}，
5:{src:“imageE”，兄弟姐妹：[2]}，
6:{src:“imageF”，兄弟姐妹：[2]}，
7:{src:“imageG”，兄弟姐妹：[3]}，
8:{src:“imageH”，兄弟姐妹：[3]}，
9:{src:“imageI”，兄弟姐妹：[4]}，
10:{src:“imageJ”，兄弟姐妹：[4]}，
}
//初始化我们将使用的一些常量
var-DIST=200//图像间像素距离
var IMGW=64；//图像宽度
var IMGH=64；//像高
var SCX=400；//中央屏幕x位置
var SCY=400；//中央屏幕y位置
var DEGSSTART=90；//起始度偏移
var DEGFLIP=180；//添加以反转方向
var DEGSTEP=120；//圆圈360/3
//注意：如果您有3个以上的兄弟姐妹，请适当更改步骤
//主要功能
功能图纸（节点、id、cx、cy、prevDeg）{
var节点=节点[id]；
//绘制当前节点/图像
var xOff=cx-（IMGW/2）；
var yOff=cy-（IMGH/2）；
drawImage（node.src、Math.round（xOff）、Math.round（yOff））；
//递归地绘制兄弟姐妹
var newDeg=prevDeg+DEGFLIP+DEGSTEP；
对于（变量i=0；i id）{
//转换为弧度并计算新位置
var rad=newDeg*Math.PI/180；
var newCX=cx+DIST*Math.cos（rad）；
var newCY=cy+DIST*Math.sin（rad）；
图纸（节点、新ID、新CX、新CY、新DEG）；
newDeg+=DEGSTEP；
}
}
}
//可以自定义的绘图功能
//使用jquery或其他方法
函数drawImage（src、x、y）{
//填写代码以在屏幕上显示图像
log（src+'：'+x+'，'+y）；
}
//试验
图纸（节点1、SCX、SCY、90）；

首先，将数据放入可用的结构中：
按顺序绘制节点，同时绘制ID大于当前节点的同级节点
您需要在当前节点周围以120度偏移绘制兄弟节点，以创建web（3个兄弟节点，360/3=120）

下面是一些JavaScript示例

// initialize your data
var nodes = {
    1: {src: "imageA", siblings: [2,3,4]},
    2: {src: "imageB", siblings: [1,5,6]},
    3: {src: "imageC", siblings: [1,7,8]},
    4: {src: "imageD", siblings: [1,9,10]},
    5: {src: "imageE", siblings: [2]},
    6: {src: "imageF", siblings: [2]},
    7: {src: "imageG", siblings: [3]},
    8: {src: "imageH", siblings: [3]},
    9: {src: "imageI", siblings: [4]},
    10: {src: "imageJ", siblings: [4]},
}

// initialize some constats we will use
var DIST = 200; //pixel distance between images
var IMGW = 64; // image width
var IMGH = 64; // image height
var SCX = 400; // center screen x position
var SCY = 400; // center screen y position
var DEGSSTART = 90; // starting degrees offset
var DEGFLIP = 180; // add to flip the direction
var DEGSTEP = 120; // circle 360 / 3
// note: if you have more than 3 siblings change DEGSTEP appropriately

// the main function
function drawWeb(nodes, id, cx, cy, prevDeg) {
 var node = nodes[id];
 // draw the current node/image
 var xOff = cx - (IMGW / 2);
 var yOff = cy - (IMGH / 2);
 drawImage(node.src, Math.round(xOff), Math.round(yOff));
 // draw the siblings recursively
 var newDeg = prevDeg + DEGFLIP + DEGSTEP; 
 for(var i=0; i<node.siblings.length; i++) {
  var newId = node.siblings[i];
  if(newId > id) {
   // convert to radians and calc new location
   var rad = newDeg * Math.PI / 180;
   var newCX = cx + DIST * Math.cos(rad);
   var newCY = cy + DIST * Math.sin(rad);
   drawWeb(nodes, newId, newCX, newCY, newDeg);
   newDeg += DEGSTEP;
  }
 }
}

// the draw function you can customize
// use jquery or some other method
function drawImage(src, x, y) {
 // fill in code to put an image on your screen
 console.log(src + ': ' + x + ', ' + y);
}

// test
drawWeb(nodes, 1, SCX, SCY, 90);

//初始化数据
变量节点={
1:{src:“imageA”，兄弟姐妹：[2,3,4]}，
2:{src:“imageB”，兄弟姐妹：[1,5,6]}，
3:{src:“imageC”，兄弟姐妹：[1,7,8]}，
4:{src:“imageD”，兄弟姐妹：[1,9,10]}，
5:{src:“imageE”，兄弟姐妹：[2]}，
6:{src:“imageF”，兄弟姐妹：[2]}，
7:{src:“imageG”，兄弟姐妹：[3]}，
8:{src:“imageH”，兄弟姐妹：[3]}，
9:{src:“imageI”，兄弟姐妹：[4]}，
10:{src:“imageJ”，兄弟姐妹：[4]}，
}
//初始化我们将使用的一些常量
var-DIST=200//图像间像素距离
var IMGW=64；//图像宽度
var IMGH=64；//像高
var SCX=400；//中央屏幕x位置
var SCY=400；//中央屏幕y位置
var DEGSSTART=90；//起始度偏移
var DEGFLIP=180；//添加以反转方向
var DEGSTEP=120；//圆圈360/3
//注意：如果您有3个以上的兄弟姐妹，请适当更改步骤
//主要功能
功能图纸（节点、id、cx、cy、prevDeg）{
var节点=节点[id]；
//绘制当前节点/图像
var xOff=cx-（IMGW/2）；
var yOff=cy-（IMGH/2）；
drawImage（node.src、Math.round（xOff）、Math.round（yOff））；
//递归地绘制兄弟姐妹
var newDeg=prevDeg+DEGFLIP+DEGSTEP；
对于（变量i=0；i id）{
//转换为弧度并计算新位置
var rad=newDeg*Math.PI/180；
var newCX=cx+DIST*Math.cos（rad）；
var newCY=cy+DIST*Math.sin（rad）；
图纸（节点、新ID、新CX、新CY、新DEG）；
newDeg+=DEGSTEP；
}
}
}
//可以自定义的绘图功能
//使用jquery或其他方法
函数drawImage（src、x、y）{
//填写代码以在屏幕上显示图像
log（src+'：'+x+'，'+y）；
}
//试验
图纸（节点1、SCX、SCY、90）；

你能发张照片吗？连接是否以图形的形式给出？是plannar吗？你的问题很模糊，就像“网络”的定义一样。我只是猜测了你的意思，然后回答了。你能发张照片吗？连接是否以图形的形式给出？是plannar吗？你的问题很模糊，就像“网络”的定义一样。我只是猜测了你的意思，然后回答了。谢谢你，这和我要找的差不多。我意识到这个问题很糟糕…谢谢你，这和我想要的差不多。我意识到这个问题很糟糕。。。