更新时未从d3条形图中删除旧元素

Question

I'm working on a bar chart in d3 that is supposed to take the results of a small stochastic simulation model (in this case, the susceptible-infected-recovered model of infectious disease transmission) and plot the number of new people infected on each day as the height of the bars in the chart.

This works fine when I run the model the first time, but then on subsequent runs (using the simulate() function or 'click me' button in the html) the old elements that should be replaced (ie the number of individuals infected on day 1 in the last run) are not showing up in the exit selection, which is always empty. Instead, new bars are consistently added to the end or are painted over existing bars.

I have tried a number of key functions (including no key function, and converting the integer times to strings). I'm sure I'm doing something wrong, but am not sure what that something is. So any advice would be greatly appreciated.

You can also find a working demo of this semi-working code here:

http://bl.ocks.org/jzelner/e06e2997429ada3534dc

Thanks!

var max_t = 20; N = 100; b = 1.1 total_id = 0;

function outbreak() {
    var S = N-1;
    var I = 1;
    var done = 0;
    var incidence = [{t:0, I:I, name: String(0)}];
    for (t = 1; t < max_t; t++) {
        var p_inf = 1.0-Math.exp(-b*I/N);
        var new_I = 0;
        for (i = 0; i < S; i++) {
            if (Math.random() < p_inf) {
                new_I++;
            }
        }
        if (new_I == 0) {
            break;
            done = 1;
        }
        incidence.push({t:t, I:new_I, name:String(t)});
        total_id++;
        S -= new_I;
        I = new_I;
    }
    return(incidence);
}

incidence = outbreak();



var margin = {top: 20, right: 20, bottom: 70, left: 40},
width = 600 - margin.left - margin.right,
height = 300 - margin.top - margin.bottom;

// Parse the date / time

var x = d3.scale.ordinal().rangeRoundBands([0, width], .05);
var y = d3.scale.linear().range([height, 0]);

var xAxis = d3.svg.axis()
.scale(x)
.orient("bottom")

var yAxis = d3.svg.axis()
.scale(y)
.orient("left")
.ticks(10);

var svg = d3.select("body").append("svg")
.attr("width", width + margin.left + margin.right)
.attr("height", height + margin.top + margin.bottom)
.append("g")
.attr("transform",
      "translate(" + margin.left + "," + margin.top + ")");


xvals = [];
for (i = 0; i <= 20; i++){
    xvals.push(i);
}

x.domain(xvals);
y.domain([0, 20]);




function render(zz) {
    console.log(zz)

    var bar = svg.selectAll("bar")
        .data(zz, function(d) { return d.name;});

    bar.exit().remove();


    bar.attr("class", "update")
        .attr("x", function(d) { return x(d.t); })
        .attr("width", x.rangeBand())
        .attr("y", function(d) { return y(d.I); })
        .attr("height", function(d) { return height - y(d.I); });


    console.log("UPDATE", bar)
    console.log("ENTER", bar.enter())

    bar.enter().append("rect")

        .attr("class", "enter")
        .attr("x", function(d) { return x(d.t); })
        .attr("width", x.rangeBand())
        .attr("y", function(d) { return y(d.I); })
        .attr("height", function(d) { return height - y(d.I); });

    bar
        .attr("x", function(d) { return x(d.t); })
        .attr("width", x.rangeBand())
        .attr("y", function(d) { return y(d.I); })
        .attr("height", function(d) { return height - y(d.I); });

}



render(incidence);

function simulate() {
    render(outbreak());
}

Answer 1

As explained in the comments, doing this:

svg.selectAll("path")
    .attr({
      d: line(data)
    });

instead of this:

svg.append("path")
    .data([data])
    .attr("class", "line")
    .attr("d", line);

solved my problem.