updating d3 chart with new data, the old data points not removed-CodePudding

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:

function updateGeoData(ds, de) {
        console.log("hit 233")
        const size = d3.scaleLinear()
            .domain([1, 100])  // What's in the data
            .range([4, 50])  // Size in pixel
        let updateData = $.get("/update_geo_data", {"ds":ds, "de":de});
        updateData.done(function (result) {
            var circles = svg.selectAll("myCircles").data(result, function(d) { return d; });
            circles.attr("class", "update");
            circles.enter().append("circle")
                .merge(circles)
                    .attr("cx", d => projection([d.long, d.lat])[0])
                    .attr("cy", d => projection([d.long, d.lat])[1])
                    .attr("r", d => size(d.count))
                    .style("fill", "69b3a2")
                    .attr("stroke", "#c99614")
                    .attr("stroke-width", 2)
                    .attr("fill-opacity", .4);
            circles.exit().remove();
        });
}

CodePudding user response：

This part right here is your problem:

svg.selectAll("myCircles")

myCircles isn't anything so the selection will always be empty, and you will always only append to it.

svg.selectAll("circle") should work as a selection for you. This will select all the circles currently plotted on and enter, update, remove appropriately.