• Jobs
  • About Us
  • professionals
    • Home
    • Jobs
    • Courses and challenges
  • business
    • Home
    • Post vacancy
    • Our process
    • Pricing
    • Assessments
    • Payroll
    • Blog
    • Sales
    • Salary Calculator

0

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

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();
        });
}
over 3 years ago · Juan Pablo Isaza
1 answers
Answer question

0

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.

over 3 years ago · Juan Pablo Isaza Report
Answer question
Find remote jobs

Discover the new way to find a job!

Top jobs
Top job categories
Business
Post vacancy Pricing Our process Sales
Legal
Terms and conditions Privacy policy
© 2025 PeakU Inc. All Rights Reserved.

Andres GPT

Recommend me some offers
I have an error