title: Unable to update SVG element using d3
body: <p>I am new to <code>d3</code> and am trying to learn the basics, I have drawn a circle and want to update it using function calls.</p>
  
  <p>This code works as expected and draws a circle:</p>
  
  <pre><code>const svg = d3.select('svg');
  svg.append('g').selectAll('circle')
    .data([50])
    .enter()
    .append('circle')
    .attr('cy', 60)
    .attr('cx', 100)
    .attr('r', function(d) { return d; });
  </code></pre>
  
  <p>Now I create a function which takes an array to update the <code>data</code> property and change the radius of my circle:</p>
  
  <pre><code>function update(data) {
    const circle = svg.select('g').select('circle').data(data);
    circle.enter().append('circle').attr('r', function(d) { return d; });
  }
  
  update([100])
  </code></pre>
  
  <p>If I call <code>console.log(circle.data())</code> the value is set correctly but the circle is sadly still on 50px in radius on the screen.</p>