1

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

我现在要做的是，如果节点满足某个条件，例如名称以 L 开头，则将它们移到更大圆圈的轮廓。我做了一个简单的图表来解释。

我想从 x2,y2 移动到 x3,y3

我希望能够从 [X2,Y2] 移动到 [X3,Y3]。我标记了 [X1,Y1] 因为我确定您需要它来计算从 x1y2 到 x2,y2 的向量，然后希望将用于计算沿该向量的运动，但我不确定如何进行此运动

4

2 回答 2

1

我不知道问题是否仍然存在，但无论如何我都会回答。由于该问题具有圆柱对称性，因此最好使用极坐标。所以 x,y 变成 r,phi 而 r = sqrt(x^2+y^2) 和 phi=arctan(y/x)。如果您想通过假设 r' 沿径向移动点 X(r,phi)，您只需将其添加到现有半径即可。因此 X'=X(r+r',phi)

于 2016-02-10T12:12:06.267 回答
0

这是我解决它的方法。我有一个变量moveOut，所以我可以在原始节点位置和我移动到的节点之间切换。因此，根据moveOutI 的值改变远离中心的移动比例。

 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

    });
于 2016-02-12T17:49:32.653 回答