Comment déplacer un nœud le long d'un vecteur?

Question

J'ai un groupe de nœuds dans un cercle autour d'un point central. J'ai obtenu ces positions en dessinant d'abord des arcs puis en utilisant la position des arcs [X, Y], j'ai rempli un tableau qui était utilisé pour les positions des nœuds. Utilisation du forcelayout à partir de la bibliothèque javascript D3. Ce que je veux faire maintenant, si les nœuds répondent à un certain critère, par exemple, le nom commence par L, déplacez-les sur le contour d'un plus grand cercle. J'ai fait un diagramme simple pour expliquer.

Je veux être en mesure de passer de [X2, Y2] pour [X3, Y3]. J'ai étiqueté [X1, Y1] comme je suis sûr que vous auriez besoin de cela pour travailler sur le vecteur de x1y2 à x2, y2 souhaite serait alors utilisé pour calculer le mouvement le long de ce vecteur, mais je ne sais pas comment faire ce mouvement

Answer 1

Je ne sais pas si le problème est toujours actif, mais je répondrai quand même. Puisque le problème a une symétrie cylindrique, il est préférable d'utiliser des coordonnées polaires. So x, y deviennent r, phi alors que r = sqrt (x^2 + y^2) et phi = arctan (y/x). Si vous voulez déplacer un point X (r, phi) dans la direction radiale, disons que vous le faites en l'ajoutant simplement au rayon existant. Donc X '= X (r + r', phi)

Answer 2

Voici comment je l'ai résolu. J'avais une variable moveOut donc je pouvais basculer entre la position du nœud d'origine et celle vers laquelle je me déplaçais. Donc, en fonction de la valeur de moveOut, je modifie l'échelle de mouvement loin du centre.

var thisNode = circleViewNode.filter(function(d){ 
     //console.log(d) 
      return d.origin != 'EquivalenceSets' && d.hasRelationship != true; 
     }); 

    thisNode.each(function(d){ 
     thisNodeSize = d.thisRadius; 
    }); 

    if(!moveOut){ 
       thisScale = innerModelRadius - thisNodeSize*1.5; 
       moveOut = true; 
      } else { 
       thisScale = innerModelItemRadius + (outerModelItemRadius - innerModelItemRadius)/2; 
       moveOut = false; 
      } 


    thisNode.each(function(d){ 

     //console.log(d); 
     var centerOfCircle = [width/2,height/2]; //get center 
     //var centerOfCircle = [arcCenter.x, arcCenter.y];   
     var thisPosition = [d.x, d.y]; //get position of current node 
      //thisVector = [center[0]-thisPosition[0], center[1]-thisPosition[1]], 
     var thisVector = [thisPosition[0] - centerOfCircle[0], thisPosition[1] - centerOfCircle[1]]; 
     var thisVectorX = thisVector[0]; 
     var thisVectorY = thisVector[1]; 

     var xSquared = Math.pow(thisVector[0],2); 
     var ySquared = Math.pow(thisVector[1],2); 
     var normalVector = Math.sqrt(xSquared + ySquared); //using pythagoras theorum to work out length from node pos to center 
     //console.log(d); 

     thisVectorX= thisVectorX/normalVector; 
     thisVectorY= thisVectorY/normalVector; 

      // d.x = centerOfCircle[0]+(thisVectorX*thisScale);// + -38.5; 
      // d.y = centerOfCircle[1]+(thisVectorY*thisScale);// + -20; 

      d.x = centerOfCircle[0]+(thisVectorX*thisScale); //thisScale gives the ability to move back to original pos 
      d.y = centerOfCircle[1]+(thisVectorY*thisScale); 
     //} 


    }) 
    .transition().duration(1000) 
    .attr("transform", function(d) 
    { 

    //console.log(d.hasRelationship); 
    //console.log(d.y); 
    return "translate(" + d.x + "," + d.y + ")"; //transition nodes 

    });