使用新数据更新 d3 图表，未删除旧数据点

Question

我正在尝试使用从后端获取的新数据更新我的 d3 气泡图。 但是，似乎新数据被添加到图表中但旧数据点没有被删除？ 这里有什么问题？ 这是我的 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();
        });
}

Answer 1

这部分是你的问题：

svg.selectAll("myCircles")

myCircles什么都不是，所以选择总是空的，你总是只有 append 给它。

svg.selectAll("circle")应该可以作为您的选择。 这将 select 当前绘制的所有圆圈并适当地输入、更新、删除。