title: D3 JS very odd behavior when transitioning bars in bar chart
body: <p>Hello I've been trying to figure this out for a couple hours and can't so if someone could help me would be awesome!</p>
  
  <p>Code:</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>bars
          .transition()
          .duration(2000)
          .ease("quad")
          .attr("transform", function(d) {
              console.log(d.Sequence + " " + "translate(" + x0(d.Sequence) + ",0)");
              return "translate(" + x0(d.Sequence) + ",0)"; }) ;</code></pre>
  </div>
  </div>
  </p>
  
  <p>Everything seems to be working correctly but the bars do not move re order along the X axis to the dynamic values assigned to them.  If i give them static values they will move..
  Here is the console.log</p>
  
  <pre><code>protein.js:220 ANTFLEEVR translate(5,0)
  protein.js:220 YTACETAR translate(65,0)
  protein.js:220 LAACLEGNCAEGLGTNYR translate(125,0)
  protein.js:220 GHVNITR translate(185,0)
  protein.js:220 SGIECQLWR translate(245,0)
  protein.js:220 YPHKPEINSTTHPGADLQENFCR translate(305,0)
  protein.js:220 NPDSSTTGPWCYTTDPTVR translate(365,0)
  protein.js:220 QECSIPVCGQDQVTVAMTPR translate(425,0)
  protein.js:220 SEGSSVNLSPPLEQCVPDR translate(485,0)
  protein.js:220 GQQYQGR translate(545,0)
  protein.js:220 LAVTTHGLPCLAWASAQAK translate(605,0)
  protein.js:220 HQDFNSAVQLVENFCR translate(665,0)
  protein.js:220 TATSEYQTFFNPR translate(725,0)
  protein.js:220 TFGSGEADCGLRPLFEK translate(785,0)
  protein.js:220 ELLESYIDGR translate(845,0)
  protein.js:220 IVEGSDAEIGMSPWQVMLFR translate(905,0)
  protein.js:220 SPQELLCGASLISDR translate(965,0)
  protein.js:220 WVLTAAHCLLYPPWDK translate(1025,0)
  protein.js:220 NFTENDLLVR translate(1085,0)
  protein.js:220 KPVAFSDYIHPVCLPDR translate(1145,0)
  protein.js:220 ETAASLLQAGYK translate(1205,0)
  protein.js:220 VTGWGNLK translate(1265,0)
  protein.js:220 ETWTANVGK translate(1325,0)
  protein.js:220 GQPSVLQVVNLPIVERPVCK translate(1385,0)
  protein.js:220 ITDNMFCAGYKPDEGK translate(1445,0)
  protein.js:220 GDACEGDSGGPFVMK translate(1505,0)
  protein.js:220 WYQMGIVSWGEGCDR translate(1565,0)
  protein.js:220 YGFYTHVFR translate(1625,0)
  protein.js:220 VIDQFGE translate(1685,0)
  </code></pre>
  
  <p>If I manually put in 0 or 10 etc in place of x0(d.Sequence) the bars move to that location and all pile up as the coordinates are the same, but when the value from the log is used x0(d.Sequence), none of the bars move at all...  I can confirm that the values of the translate that are logged are very different from the original bar charts state so things should move...</p>
  
  <p>Any ideas? Help!?
  Thanks :)
  Yuval</p>
  
  <p>Edit, posting more code:</p>
  
  <pre><code>    groupData.sort(function(a, b) {
          return a["StartIndex"] - b["StartIndex"];
      });
      var bars =  d3.select("#barchart").selectAll("g.group")
          .data(groupData);
  
      var x0 = d3.scale.ordinal()
          .rangeRoundBands([0, width]);
  
      var xAxis = d3.svg.axis()
          .scale(x0)
          .orient("bottom");
  
  
      var groups = ["Before Incubation", "After Incubation"];
      groupData.forEach(function (d) {
          d.groups = groups.map(function (name) {
              return {name: name, value: +d[name]};
          });
          console.log(d.groups)
      });
  
      x0.domain(groupData.map(function (d) {
          console.log(d);
          return d.Sequence;
      })); // groups
  </code></pre>