So far, no raindrop has shown itself, but you have the background scene in place:

You have the means to animate the life cycle with the databind() and the draw() functions. You just call them in a sequence and wire this call-up with the buttons. Let's play this through for the Enter case. The cloud is empty and we want raindrops to transition into play from 0 to 0.2 opacity, that's how we specified it in the databind() function. We could just run:

databind(raindata);
draw(context);

This will join the data to the custom elements and, as all elements are joined with new data, draw the enter selection – once! But we need to display the transition, so we need to draw repeatedly while the transition is happening. You achieve this with a continuous loop:

databind(data);
var t = d3.timer(function(elapsed) {
  draw(context);
   if (elapsed > dur * 2) t.stop();
});

First, we bind the incoming data to our custom elements. Then we draw repeatedly. d3.timer() calls its callback repeatedly until you tell it to stop. The callback takes an argument we call elapsed here, which is the time in milliseconds the timer is running. The draw() function will be run many times drawing the background scene as well as each raindrop. At the same time a transition is running within databind(), changing each raindrop's position slightly. The draw() function will pick up these slight position changes as it loops through each raindrop every time it's called, drawing the raindrop at the very position the transition in databind() sets it to at this given moment. You can think of it as two processes happening at the same time: the transition in databind() delivering new raindrop positions and the repeated canvas drawing in draw() removing the previous canvas and drawing these new raindrop positions.

After the transition is done, we want to stop the timer. Work done. The transition in databind() runs for 2000 milliseconds, as we set it in the dur variable. We shall use dur now to clear up after us. We can stop any timer from within calling the timer's .stop()-method. To be safe we call t.stop() after we're passed double our duration dur (4000 milliseconds) to cater for delayed transitions. 

This is how a D3 transition works in Canvas. You call the drawing function more or less parallel to the binding function repeatedly Whatever style or position properties your D3 elements are set up to transition (x, y, color, width, height, for example.), they will be re-drawn many times with small incremental changes for each draw.

Wiring it up to the buttons is a formality. Just wrap the databind() and draw() functions into a function (we shall call it rainAnimation()) that passes in the raindata when the enter or update button is pressed and an empty array when the exit button is pressed.

That's it!

The rain cloud will appear on the screen upon hitting the Enter button:

The Update button will update the rain's position from the cloud to a puddle:

The Exit button will finally turn the rain into grass:

A natural D3 life cycle demonstration!