title: Reusable charts in d3: how do the create and update selections work?
body: <p>Several of the <a href="http://bost.ocks.org/mike/chart/">reusable charts</a> examples, such as the <a href="http://bl.ocks.org/1933560">histogram</a>, include the following:</p>
  
  <pre><code>// select the svg element, if it exists
  var svg = d3.select(this).selectAll("svg").data([data]);
  
  // append the svg element, if it doesn't exist
  svg.enter().append("svg") ...
  </code></pre>
  
  <p>...where <code>this</code> is the current DOM element and <code>data</code> is the data that's been bound to it. As I understand it, this idiom allows a chart to be created the first time the chart function is called, but not 'recreated', if you like, following subsequent calls. However, could anyone explain this idiom in detail? For example:</p>
  
  <ul>
  <li>Why is <code>.selectAll("svg")</code> used and not <code>.select("svg")</code>?</li>
  <li>Why isn't <code>.empty()</code> used to check for an empty selection?</li>
  <li>Can any single-element array be passed to <code>.data()</code>? (I assume the purpose of this array is simply to return the enter selection.)</li>
  </ul>
  
  <p>Thanks in advance for any help.</p>