score:2

Accepted answer

as far as i can tell, you're on the right track.

you obtained subdata, then you applied it to rects

    rects.data(subdata)
         .remove();// this is wrong!!

i'm not sure why you're calling remove(), but that's essentially removing all dom elements that are in subdata. this should be taken out.

next, (i'm pretty sure that) you need to reassign rects to the new binding. i.e.

    rects = rects.data(subdata);

on the next you append all the enter()'ing rects. but you're missing some of the settings ('y', 'fill', etc attributes). but you also need to update all the subdata members that were not added nor removed from the set. so it becomes:

    rects.enter()
         .append('rect')
         .attr('y',function(d) {
           return(scale.yy(d.count));
         })
         .attr('height',function(d){
           return(scale.yh(d.count));
         })
         .attr('fill',function(d){
           return(d3.hsl(120-(120*(d.count/50)),1,0.1));
         });

    rects// this happens for all updated and entering rects
         .attr('x',function(d){
           return(scale.x(d.date))
         })
         .attr('width',barwidth);

finally, you need to remove ones that are no longer in subdata:

    rects.exit().remove();

this logic is a lot like what you have higher up, in the init script (except the init version only operated on the enter()'ing set). so you should move it all into a function:

updatechart(newdata) {
    rects = rects.data(subdata);
    rects.enter()
    // etc....

    rects.remove()
}

and call this function at init time and when new subdata is being applied.


Related Query

More Query from same tag