title: d3 transitions bar graph
body: <p>I've been scratching my head for a while, and I'm hoping someone can help clarify how d3 v4 transitions work.</p>
  <p>I have a stacked bargraph, and I am attempting to have the bars grow in width.</p>
  <p><a href="https://codepen.io/Fallenstedt/pen/oWWObX?editors=1010" rel="nofollow noreferrer">You can see the current bargraph here</a> Line 36 is where I draw rectangles.</p>
  <p>And what I have been trying to do is transition each bar like so:</p>
  <pre><code>  layer.selectAll(&quot;rect&quot;)
      .data(function(d) { return d; })
      .enter().append(&quot;rect&quot;)
      .attr(&quot;y&quot;, function(d) { return yScale(parseDate(d.data.date)); })
      .attr(&quot;x&quot;, function(d) { return xScale(d[0]); })
      .attr(&quot;height&quot;, yScale.bandwidth())
      .attr(&quot;width&quot;, function(d) { return xScale(d[1]) - xScale(d[0]) })
      .transition() //start transition here
      .duration(500)
      .delay(function(d,i) { return i * 100 })
      .attr(&quot;width&quot;, function(d) { return xScale(d[1]) - xScale(d[0]) })
  </code></pre>
  <p>I would expect each rectangle to grow to its full width in 500ms, and have a delay that grows with each rectangle.</p>
  <p>How do I properly implement transitions in D3 v4?</p>