0

我正在尝试制作一个将元素定向到点击的功能。代码有效（方向角度很好），但是在旋转之前有一个平移，可以将元素放置在合适的位置并根据它们的中心进行旋转。

抱歉，如果我的代码不好，我的数学不好，我使用了一些教程来使它工作。该函数将元素定向和他在容器中的偏移位置。

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：对不起，如果我的语言不好。并要求添加信息。

4

0 回答 0