How To Update Selection With New Data In D3?

I'm trying to edit the data of created circles in D3. Below my code is pasted of me creating a lot of circles based on some data from graphData. Supposed I'd want to re-arrange my

Solution 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.

functionupdateCircles(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){returnxScale(100);})
        .attr("cy",function(d){returnyScale(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.