title: updating d3 chart with new data, the old data points not removed
body: <p>I am trying to update my d3 bubble chart with new data getting from the backend. However, it seems that the new data gets added to the chart but the old data points are not removed? What is the issue here?
  Here is my function:</p>
  <pre><code>function updateGeoData(ds, de) {
          console.log(&quot;hit 233&quot;)
          const size = d3.scaleLinear()
              .domain([1, 100])  // What's in the data
              .range([4, 50])  // Size in pixel
          let updateData = $.get(&quot;/update_geo_data&quot;, {&quot;ds&quot;:ds, &quot;de&quot;:de});
          updateData.done(function (result) {
              var circles = svg.selectAll(&quot;myCircles&quot;).data(result, function(d) { return d; });
              circles.attr(&quot;class&quot;, &quot;update&quot;);
              circles.enter().append(&quot;circle&quot;)
                  .merge(circles)
                      .attr(&quot;cx&quot;, d =&gt; projection([d.long, d.lat])[0])
                      .attr(&quot;cy&quot;, d =&gt; projection([d.long, d.lat])[1])
                      .attr(&quot;r&quot;, d =&gt; size(d.count))
                      .style(&quot;fill&quot;, &quot;69b3a2&quot;)
                      .attr(&quot;stroke&quot;, &quot;#c99614&quot;)
                      .attr(&quot;stroke-width&quot;, 2)
                      .attr(&quot;fill-opacity&quot;, .4);
              circles.exit().remove();
          });
  }
  </code></pre>