title: Strange rotation of rectangle around its center using d3.js
body: <p>I'm planning to rotate a rectangle around its center using d3.js.
  My code is</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>var svg = d3.select("body")
    .append("svg").attr("width", 200).attr("height", 200).append("rect")
    .attr("x", 50)
    .attr("y", 50)
    .attr("fill", "black")
    .attr("width", 100)
    .attr("height", 100)
    .transition()
    .ease("linear")
    .duration(1000)
    .attr("transform", "rotate(180,100,100)");</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"&gt;&lt;/script&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>It rotates and comes to its original x,y coordinates of rectangle, but
  does not rotate around its center during rotation.</p>
  
  <p>The correct code I found on web is</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>var svg = d3.select("body").append("svg").attr("width", 200).attr("height", 200);
  
  var rect = svg.append("rect")
      .attr("x", 50)
      .attr("y", 50)
      .attr("width", 100)
      .attr("height", 100);
  
  rect.transition().duration(5000)
      .attrTween("transform", rotTween);
  
  function rotTween() {
      var i = d3.interpolate(0, 360);
      return function(t) {
          return "rotate(" + i(t) + ",100,100)";
      };
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"&gt;&lt;/script&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>This rectangle rotates around its center properly. But I can't see any difference between two codes. What's the difference?</p>