title: d3js, rotate element from their center
body: <p>I'm trying to make a function which orient elements to a clicked one.
  The code works (orient angle is good) but there is a translation before the rotation to place the element at good place and make the rotation according to their center.</p>
  
  <p>Sorry if my code is bad, i'm not good in Math and i used some tutorial in order to make it work.
  The function take the element to orient and his offset position in his container.</p>
  
  <pre><code>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&gt;&gt;"+anglInDegrees+" // Position x/y&gt;&gt;"+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);
          }
      }
  </code></pre>
  
  <p>It's this line:</p>
  
  <pre><code>d3.select("#"+sid+"Bulle").transition().duration(320)
              .attr("transform", function(){
                  return "translate("+offSetX+", "+offSetY+") rotate("+anglInDegrees+", "+p1x+", "+p1y+")";
  </code></pre>
  
  <p>which make the transformation, rest of code is good. It's juste the succession of translation/rotation which dont make the effect that i want. 
  <strong>At each click we can see a little transition before the rotation (in theorie this translation juste place elements in order to make the rotation according to their center)</strong></p>
  
  <p>You can see the actual result here: <a href="http://www.pixelreseller.com/d3giro/" rel="nofollow">http://www.pixelreseller.com/d3giro/</a>
  Click on the circle map to launch animation.</p>
  
  <p>ps: sorry if my langage is bad. And ask for adding information.</p>