title: Animating table rows reording with d3.js
body: <p>I want to reorder table's data and animate the table's row exchange smoothly.</p>
  
  <p>Code can be found at <a href="http://jsfiddle.net/HCLe5/1/" rel="nofollow">http://jsfiddle.net/HCLe5/1/</a>
  </p>
  
  <pre><code>var table = d3.select("body").select("table#d3table");
  var tHead = table.append("thead");
  tHead.append("tr");
  tHead.selectAll("th").data(thead).enter().append("th").text(function(d) {return d.id});
  var tBody = table.append("tbody");
  var tr = tBody.selectAll("tr").data(tbody).enter().append("tr");
  tr.selectAll("td")
      .data(function(d){return d.row})
      .enter()
          .append("td")
          .text(function(d){return d.value + d.id})
  
  // Some magick row position manipulation
  </code></pre>