score:1

To put some flesh on Lars comment, here is a FIDDLE leveraging the enter/update/exit pattern to help you out. I have altered and simplified your code (and data) just enough to demonstrate the principle.

function updateCircles(dataset,color) {
    var circle = SVGbody
        .selectAll("circle")
        .data(dataset, function(d) { return d; });

    circle
        .exit()
        .transition().duration(750)
        .attr("r", 0)
        .remove();

    circle
        .enter()
        .append("circle");

    circle
        .attr("cx",function(d){return xScale(100);})
        .attr("cy",function(d){return yScale(parseFloat(d))})
        .attr("r",0)
        .transition().duration(1500)
        .attr("r",5)
        .style("fill", color);
};

Update fiddle with data keyed off by index...so, circles just have their position updated.


Related Query