如何沿向量移动节点？

Question

我有一堆围绕中心点的圆圈中的节点。我通过先绘制弧线然后使用弧线 [X,Y] 位置获得这些位置，填充一个用于节点位置的数组。使用 javascript 库 D3.

中的 forcelayout

我现在要做的是，如果节点满足一定的条件，比如名字以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)。如果您想通过假设 r' 在径向方向上移动点 X(r,phi)，只需将其添加到现有半径即可。因此 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

    });

如何沿向量移动节点？

How to move a node along a vector?

javascript

vectormath

d3.js