Estoy tratando de actualizar mi gráfico de burbujas d3 con nuevos datos obtenidos del backend. Sin embargo, parece que los nuevos datos se agregan al gráfico pero los puntos de datos antiguos no se eliminan. Cuál es el problema aquí? Aquí está mi función:
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(); }); }
Esta parte de aquí es tu problema:
svg.selectAll("myCircles")
myCircles
no es nada, por lo que la selección siempre estará vacía, y siempre solo se agregará a ella.
svg.selectAll("circle")
debería funcionar como una selección para usted. Esto seleccionará todos los círculos trazados actualmente e ingresará, actualizará y eliminará de manera apropiada.