Как переместить узел вдоль вектора?

Question

У меня есть куча узлов по кругу вокруг центральной точки. Я получил эти позиции, сначала рисуя дуги, а затем используя позицию дуги [X, Y], заполнил массив, который использовался для позиций узлов. Использование forcelayout из библиотеки javascript D3.

Что я хочу сделать сейчас, если узлы отвечают определенным критериям, например, имя начинается с L, переместите их в контур большего круга. Я объяснил простую диаграмму.

Я хочу, чтобы иметь возможность перейти от [X2, Y2] на [X3, Y3]. Я обозначил [X1, Y1], так как я уверен, что вам понадобится это для разработки вектора от x1y2 до x2, тогда y2-пожелание будет использовано для вычисления движения вдоль этого вектора, но я не уверен, как это сделать.

Answer 1

Я не знаю, все еще проблема, но я все равно отвечу. Поскольку задача имеет цилиндрическую симметрию, лучше всего использовать полярные координаты. Таким образом, x, y становятся r, phi, тогда как r = sqrt (x^2 + y^2) и phi = arctan (y/x). Если вы хотите переместить точку X (r, phi) в радиальном направлении, произнесите r ', сделав это, просто добавив ее в существующий радиус. Таким образом, X '= X (r + r', phi)

Answer 2

Вот как я его решил. У меня была переменная moveOut, поэтому я мог переключаться между исходной позицией узла и той, на которую я перехожу. Поэтому в зависимости от значения moveOut Я изменяю масштаб движения вдали от центра.

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 

    });