d3.js Bar Chart transitions not working properly
<p>I have a simple bar chart here that should nicely transition all the bars over slightly to the left to make room for a new bar to appear on the right of the graph whenever new data is submitted via a button click event, however they all seem to fire over to the left side on top of each other.</p>

<p>Here is my code for my transition:</p>

<pre><code>bars.transition()
        .duration(1000)
        .attr("x", function(d, i) {
          return x(i);
        })
        .attr("y", function(d) {
          return y(d.count);
        })
        .attr("width", x.rangeBand())
        .attr("height", function(d) {
          return height - y(d.count);
        });
</code></pre>

<p>Here is a jsfiddle of the code so far: <a href="https://jsfiddle.net/foL2Lcg1/1/" rel="nofollow">https://jsfiddle.net/foL2Lcg1/1/</a></p>

<p>The test data for entry on the button submission I'm using is 'Service: blah' and 'Count: 60000' which you can enter below the graph.</p>

<p>Any suggestions?</p>