score:1

Your problem is in your updateChart function:

function updateChart() {

    ...

    volumeBars = week.selectAll("rect")
        .data(function(d, i) {
            return d;
        });  // <= Here is the problem

   ...
}

You have to define a way to make unique each element, in order to find them easily. You have to attribute a key, and d3 selections will use it to know if a element is new / already present / removed from the current selection. The 2nd argument of data function makes that:

volumeBars = week.selectAll("rect")
    .data(function(d, i) {
        return d;
    },
    function(d){return d.timeId + d.week;});
    //Here you can define the key you want

You can find the documentation for data function here: https://github.com/d3/d3/wiki/Selections#data

In addition, you don't have to create another selection before your exit call. Selection is already created before, the same on which you called your enter. So you can just write:

volumeBars.exit().text(function(d) {console.log(d);}).remove();

Here the update plunker: https://plnkr.co/edit/inrD7aC3KYmv8iU2gnkA?p=preview

Hope it helps.


Related Query