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）。如果你想在径向上移动一个点X（r，phi），可以说r＆＃39;你可以通过简单地将它添加到现有半径来实现。因此X＆= 39; = X（r + r＆＃39;，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

    });

如何沿向量移动节点？

2 个答案: