无法在D3中过渡到新数据

Question

I can load and display data perfectly once, but any attempt to update seems to fail.

I'm trying to build a map that shows activity. In my data csv I have latitude and logitude and the hour of activity (0-23). I am using this highly useful tutorial on updating D3 with new data. The idea being that I cycle through data by the hour.

I've more-or-less stolen the update function. While the initial call works perfectly, any repeated calls manage to only recolor the already-present data, rather than remove it and add new data. This leads me to believe I am not changing the incoming data.

Is there anything obviously wrong with my update call?

function update(data, x) {
    // DATA JOIN
    // Join new data to any existing data
    var circles = g.selectAll("circle")
        .data(data); //, function(d) { return d; });

    // UPDATE
    // Update old elements as needed.
    circles
        .style("fill", "green")
            .transition()
            .duration(750);

    // ENTER
    // Create new elements
    circles.enter().append("circle")
        .filter(function(d) { return d.hr == x; })
        .attr("cx", function(d) {
            return projection([d.lon, d.lat])[0];
        })
        .attr("cy", function(d) {
            return projection([d.lon, d.lat])[1];
        })
        .attr("r", 0)
        .style("opacity", 0.2)
        .style("fill", "blue")
        .transition()
        .duration(750)
        .ease("linear")
        .attr("r", function(d) {
            return d.radius/2;
        });


    // EXIT
    // Remove old elements
    circles.exit()
        .style("fill", "red")
        .transition()
        .duration(1500)
        .ease("linear")
        .attr("r", 0)
        .remove();
}

Run from the command line:

update(csv_data, 1)
update(csv_data, 5)

Answer 1

It seems like you're trying to change the data by the line

filter(function(d) { return d.hr == x; })

but that's only filtering the selection .

What you want to do is filter the data before passing it to your selection which you do with the line

.data(data);

I suggest using Array.filter in the beginning of your update function:

function update(data, x) {
    // DATA JOIN
    // Join new data to any existing data

    // filter the data as per x
    data = data.filter(function (d) { return d.hr == x; });

    var circles = g.selectAll("circle")
        .data(data);

    // rest of function
 }

Be sure to remove the line where you filter after the append.