title: Selection not updating data
body: <p>I'm trying to update a data array with D3.js but it's doesn't work. </p>
  
  <p>I've read documentation of D3, and many demos on bl.ocks.org but my issue still persist. I don't understand why. I miss something, but I don't find what is this.</p>
  
  <p>This is my code:</p>
  
  <pre><code>const data = [4, 8, 15, 16, 23, 42]
  const data2 = [3, 6, 9, 17, 45]
  
  const button = `&lt;button&gt;Click&lt;/button&gt;`
  document.querySelector('body').insertAdjacentHTML('afterbegin', button)
  
  const svg = d3.select('body')
  .append('svg')
  
  const renderArray = (data) =&gt; {
      const group = svg.selectAll('g')
      .data(d =&gt; data)
  
      group.exit().remove()
  
      group.enter()
          .append('g')
          .merge(group)
          .attr('id', d =&gt; d)
  
      const p = group.selectAll("text")
      .data(d =&gt; d)
  
      p.enter()
          .append("text")
          .merge(p)
          .text((d) =&gt; d)
  
      p.exit().remove()
  }
  
  renderArray(data)
  
  document.querySelector('button').addEventListener('click', () =&gt; renderArray(data2))
  
  </code></pre>
  
  <p>My pen : <a href="https://codepen.io/Tirkal/pen/OKOvzN?editors=0010" rel="nofollow noreferrer">https://codepen.io/Tirkal/pen/OKOvzN?editors=0010</a></p>
  
  <p>I expect the update of data array.</p>