title: Understanding enter() and exit()
body: <p>From my understanding of the <code>enter</code> function in D3 the content of div after this code runs:</p>
  
  <pre><code>&lt;body&gt;
      &lt;div&gt;
          &lt;p class="x"&gt;&lt;/p&gt;
      &lt;/div&gt;
      &lt;script&gt;
          d3.select('div')
              .selectAll('p')
              .data([3, 4])
              /**
               * if I uncomment this it works 
               * but I don't want to call the
               * same function twice
               */
              // .text(d =&gt; d + '')
              .enter()
              .append('p')
              .text(d =&gt; d + '');
      &lt;/script&gt;
  &lt;/body&gt;
  </code></pre>
  
  <p>should be:</p>
  
  <pre><code>    &lt;div&gt;
          &lt;p class="x"&gt;3&lt;/p&gt;
          &lt;p&gt;4&lt;/p&gt;
      &lt;/div&gt;
  </code></pre>
  
  <p>but instead I get</p>
  
  <pre><code>    &lt;div&gt;
          &lt;p class="x"&gt;&lt;/p&gt;
          &lt;p&gt;4&lt;/p&gt;
      &lt;/div&gt;
  </code></pre>
  
  <p>1) I'm I missing something? From my understanding the <code>3</code> should be applied to the first <code>p</code> and the <code>4</code> to the appended one after the enter function.</p>
  
  <p>2) Also I don't quite get the exit().remove() thing, from my understanding it should remove the appended <code>p</code> but it doesn't then what it is it good for?</p>