rotation - d3js、要素を中心から回転

Question

クリックした要素に要素を向ける関数を作成しようとしています。コードは機能します (向きの角度は適切です) が、要素を適切な場所に配置し、中心に従って回転させるために、回転の前に変換があります。

私のコードが悪い場合は申し訳ありません。私は数学が苦手で、それを機能させるためにいくつかのチュートリアルを使用しました。この関数は、向きを合わせる要素と、コンテナー内のオフセット位置を取得します。

function refresh(scot, offSetX, offSetY){
        // récupére et traite l'id
        var id = scot.attr("id")
        var sid = id.substring(0, id.length-6);
        // dimensions et positions scot courant (curent element to orient)
        var w1 = _scotDim[sid+"Points"][0]/2;
        var h1 = _scotDim[sid+"Points"][1]/2;
        var x1 = _initPos[sid+"Points"][0];
        var y1 = _initPos[sid+"Points"][1];
        var x1prim = _initPos[sid+"Points"][0]+offSetX;
        var y1prim = _initPos[sid+"Points"][1]+offSetY;
        // dimensions et positions du scot vers lequel se tourner (target element to focus)
        var w2 = _scotDim[dadID+"Points"][0]/2;
        var h2 = _scotDim[dadID+"Points"][1]/2;
        var x2 = _initPos[dadID+"Points"][0];
        var y2 = _initPos[dadID+"Points"][1];
        var x2prim = _initPos[dadID+"Points"][0]+offSetX;
        var y2prim = _initPos[dadID+"Points"][1]+offSetY;
        // calcul de la différence entre les positions du scot courant et du scot vers lequel se tourner
        var p1x = x1+w1+_offSetX;// position du scot courant
        var p1y = y1+h1+_offSetY;
        var p2x = x2+w2+_offSetX;// position du scot vers lequel s'orienter
        var p2y = y2+h2+_offSetY;
        // calcul de l'orientation à appliquer sur le scot courant
        var p1xprim = x1prim+w1;
        var p1yprim = y1prim+h1;
        var p2xprim = x2prim+w2;
        var p2yprim = y2prim+h2;
        var deltax = p2xprim - p1xprim;
        var deltay = p2yprim - p1yprim;
        // valeur de la rotation à appliquer
        var anglInDegrees = Math.atan2(deltay, deltax) * 180 / Math.PI;
        //console.log(sid+" : Orientation>>"+anglInDegrees+" // Position x/y>>"+p1x+"/"+p1y);
        // animation du scot courant (translation et rotation)
        d3.select("#"+sid+"Bulle").transition().duration(320)
            .attr("transform", function(){
                return "translate("+offSetX+", "+offSetY+") rotate("+anglInDegrees+", "+p1x+", "+p1y+")";
            })
            .delay(50).style("opacity", 1);

        // fait disparaitre la bulle du scot cliqué
        if(dadID+"Points" == id){
            d3.select("#"+sid+"Bulle").transition().duration(400)
                .style("opacity", 0);
        }
    }

それはこの行です：

d3.select("#"+sid+"Bulle").transition().duration(320)
            .attr("transform", function(){
                return "translate("+offSetX+", "+offSetY+") rotate("+anglInDegrees+", "+p1x+", "+p1y+")";

変換を行うもので、残りのコードは良好です。私が望む効果をもたらさないのは、並進/回転の連続です。 クリックするたびに、回転の前に少し変化が見られます (理論的には、この移動は中心に従って回転するために要素を配置するだけです)。

実際の結果はこちらで確認できます: http://www.pixelreseller.com/d3giro/ サークル マップをクリックしてアニメーションを起動します。

ps: 私の言語が悪い場合は申し訳ありません。そして情報の追加を求めます。