1

中心点の周りに円の中にたくさんのノードがあります。最初にアークを描画してから、アーク [X,Y] 位置を使用してこれらの位置を取得し、ノードの位置に使用される配列を設定しました。JavaScript ライブラリ D3 の forcelayout を使用します。

私が今やりたいことは、ノードが特定の基準を満たしている場合、たとえば、名前がLで始まる場合、それらをより大きな円の輪郭に移動します。簡単な説明図を作りました。

x2,y2 から x3,y3 に移動したい

[X2,Y2]から[X3,Y3]に移動できるようにしたいです。[X1,Y1] というラベルを付けたのは、x1y2 から x2,y2 へのベクトルを計算するためにこれが必要だと確信しているためです。その後、そのベクトルに沿った動きを計算するために使用されますが、この動きを行う方法がわかりません

4

2 に答える 2

0

これが私がそれを解決した方法です。変数があった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

    });
于 2016-02-12T17:49:32.653 に答える