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

Question

我正在尝试使用从后端获取的新数据更新我的 d3 气泡图。然而，似乎新数据被添加到图表中但旧数据点没有被删除？这里的问题是什么？这是我的功能：

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 什么都不是，所以 selection 永远是空的，你永远只会附加到它。

svg.selectAll("circle") 对你来说应该是一个 selection。这将 select 当前绘制的所有圆圈并适当地输入、更新、删除。

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

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

javascript

d3.js