title: Update, exit, update, enter patterns with transition
body: <p>Essentially, according to <a href="https://bl.ocks.org/GerardoFurtado/b0d66087d9888a2cac3a42b114e5e8c4/72a0e54de5ce8cba2c398b282d953dd5c2bcc66e" rel="nofollow noreferrer">this</a> bl.ocks, I am trying to have all the blocks go to 0 before starting a new sequence. I think what I require is the following sequence:</p>
  
  <ul>
  <li><code>Update</code> to 0</li>
  <li><code>Exit</code> to 0</li>
  <li><code>Update</code> random number</li>
  <li><code>Enter</code> with new number</li>
  </ul>
  
  <p>I have tried to follow the pattern above by adding the following code block:</p>
  
  <pre><code>function update(n1) {
  
    var cellUpdate = cell.selectAll("rect")
        .data(d3.range(0));
  
    var n0 = cell.selectAll("rect").size();
  
    var cellExit = cellUpdate.exit().transition()
        .delay(function(d, i) { return (n0 - i) * updateDelay; })
        .duration(updateDuration)
        .attr("width", 0)
        .remove();
  
    var cellUpdate = cell.selectAll("rect")
        .data(d3.range(n1));
  
    var cellEnter = cellUpdate.enter().append("rect")
        .attr("width", 0)
        .attr("height", cellSize)
        .attr("x", function(i) {
          var x0 = Math.floor(i / 100) % 10, x1 = Math.floor(i % 10);
          return groupSpacing * x0 + (cellSpacing + cellSize) * (x1 + x0 * 10);
        })
        .attr("y", function(i) {
          var y0 = Math.floor(i / 1000), y1 = Math.floor(i % 100 / 10);
          return groupSpacing * y0 + (cellSpacing + cellSize) * (y1 + y0 * 10);
        })
      .transition()
        .delay(function(d, i) { return (i - n0) * updateDelay; })
        .duration(updateDuration)
        .attr("width", cellSize);
  </code></pre>
  
  <p>Essentially the parts that I added are the additional <code>cellUpdate</code> first by entering with <code>0</code> data and then by selecting <code>range(n1)</code> which is the random number.</p>
  
  <p>Another effort I tried was 2 call the function twice with:</p>
  
  <pre><code>(function interval() {
    update(Math.floor(0);
    update(Math.floor(Math.random() * 100 * 100));
    setTimeout(interval, updateDelay * 100 * 100 + updateDuration + 1000);
  })();
  </code></pre>
  
  <p>Both methods do not work, with blocks both simultaneously exiting and updating at the same time, or at least looks like it, my hunch that it is because of the delays. I am looking for the best method to be able to exit to a default number and update based on a new number within the same function call.</p>
  
  <p>Any help is much appreciated! </p>