title: transitioning multiple elements with d3
body: <p>I'm having a heck of a time with transitions in D3js.  I posted a fiddle here: <a href="http://jsfiddle.net/yHrYs/4/" rel="nofollow">dynamic area graph</a>.  The problem that I run into is that when trying to follow this tutorial <a href="http://bost.ocks.org/mike/path/" rel="nofollow">path transitions</a>, I run into sync problems with the xAxis. Bostock indicates that the domain should be skewed slightly so that the data appears to "shift" in from the side.  However, when I do that, the data reflected will be listed under a tick mark that is "2 minutes" behind the actual time it should be listed.  If I just update the data as-is, without doing the tricky stuff with the clip-path, it works fine.  All of the data is in sync.  Just for reference, the xAxis is an integer, linear scale.  Dealing with date strings was madding, even though d3 has great time manipulation, I just find dealing with epoch easier.  If someone could check out the fiddle and let me know how to transition the entire drawing...I want it to be smooth like in the examples that bostock has.</p>
  
  <p>Since SO requires <em>some code</em>, here's the data structure that I'm generating.  The rest is in the fiddle:</p>
  
  <pre><code>    setInterval(function(){
    lastTime = lastTime.add('m',1);
    var data = {"apikey":"FOO",
      "description":"a dumb description",
      "beg_effective_dt_tm":lastTime,
      "data":{
        "sum":getRandomInt(385,4000),
        }
      };
      tick(data);
  },1000)
  </code></pre>