title: d3.js: Change x-axis interval on click
body: <p>I've got this pair of axes that are nearly working the way I want them to, but there's a small, peculiar error. </p>
  
  <p>I've got the graph configured to change the x-axis interval depending on which one of these nav-pills are selected, and it does this but it requires two clicks for the changes to render.</p>
  
  <p>You can see a slightly working example here: <a href="http://jsfiddle.net/zreqz/3/" rel="nofollow">http://jsfiddle.net/zreqz/3/</a></p>
  
  <p>Basically, the meat of this problem lies in the code towards the bottom of the JavaScript:</p>
  
  <pre><code>$("li").on("click", function () {
      $("#chart").empty();
      renderGraph();
  });
  </code></pre>
  
  <p>So the steps are: </p>
  
  <ol>
  <li>Click one of the pills</li>
  <li>Clear the graph from the DOM</li>
  <li><p>Re-render the graph and determine which pill is active, form the x-axis domain based on that:</p>
  
  <pre><code>getIntervalType = function () {
    if ($("#hours").hasClass("active")) {
      return startTimeHour;
    } else if ($("#days").hasClass("active")) {
      return startTimeDay;
    } else if ($("#months").hasClass("active")) {
      return startTimeMonth;
    }
  };
  </code></pre></li>
  </ol>
  
  <p>Anyone know a solution to getting the graph to re-render correctly on the first click?</p>
  
  <p>Thanks in advance.</p>