D3在过渡时从时标中删除旧元素

Question

Simple SVG with time scale of last five seconds on x-axis where every second I'm adding a circle and every 100ms moving all existing circles from right to left.

var data = [];

setInterval(function() {

    var now = new Date();
    var fiveSecAgo = new Date(now.getTime() - 5000);
    x.domain([fiveSecAgo, now]);

    svg.selectAll("circle")
        .transition()
        .ease("linear")
        .duration(100)
        .attr("cx", function(d) {
            return x(d.date);
        });

}, 100);

// add circle every second
setInterval(function() {
    data.push({
        date: new Date()
    });

    svg.selectAll("circle")
        .data(data).enter()
        .append("svg:circle")
        .attr("r", 4)
        .attr("cx", function(d) {
            return x(d.date);
        })
        .attr("cy", height / 2);

}, 1000);

Working fiddle

Now that is all good, but after first 5 seconds, there will be elements with negative x value (older than 5 seconds) so I'd like to remove them, keeping the smooth transitioning for existing elements within last 5 seconds.

So my approach was to keep my data array containing only last 5 seconds:

for (var i = 0; i < data.length; i++) {
    if (data[i].date < fiveSecAgo) {
        data.shift();
    } else {
        break;
    }
}

before doing the transitioning of existing circles and then doing .exit().remove(). Although the old elements will get removed, the transition is not smooth anymore.

Answer 1

The problem is that by default, D3 is matching data by index. That is, your modified data is matched to the wrong DOM elements and hence you see them moving in weird ways. This is easily fixed by providing a key function to .data() that tells D3 how to do the matching:

.data(data, function(d) { return d.date; })

In addition, it's not safe to modify an array that you iterate over, so don't .shift() inside a loop. In your case, it's enough to do

if(data[0].date < fiveSecAgo) data.shift();

Complete demo here . I've cleaned up some other stuff as well.