title: Basic D3.js: create or update element?
body: <p>Basic D3.js question, getting to grips with the syntax!</p>
  
  <p>I'm using D3 and I want to <strong>create</strong> an axis if it doesn't exist, or <strong>update</strong> it with a transition if it does already exist. </p>
  
  <p>My current code is below, but this code re-creates the axis each time - it doesn't transition. How can I change it to transition?</p>
  
  <pre><code>var xAxis = d3.svg.axis().scale(x).orient("bottom").ticks(4).tickSize(6, 3, 0);
  
  updateGraphAndAxes(initialdata);
  
  $('#button').click(function() { 
    updateGraphAndAxes(newdata);
  });
  
  function updateGraphAndAxes(newdata) { 
    // update x.domain here using newdata, then... 
    svg.append("g")
     .attr("class", "x axis")
     .attr("transform", "translate(0," + height + ")")
     .call(xAxis);
  } 
  </code></pre>