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+")";

进行转换，其余代码都很好。它是翻译/旋转的继承，它不会产生我想要的效果。 在每次点击时我们都可以看到旋转前的一点过渡（理论上这个翻译juste放置元素以便根据它们的中心进行旋转）

您可以在此处查看实际结果：http://www.pixelreseller.com/d3giro/ 单击圆形图以启动动画。

ps：对不起，如果我的语言不好。并要求添加信息。

d3js，从中心旋转元素

0 个答案: