d3.js - trouble animating transition AND removing elements in D3 -

my goal allow end user toggle between 2 histograms using update functions run on clicks.

i can update histogram using following 2 functions (one each dataset). however, can figure out how either 1) remove existing rects , replace them new rects updated data in abrupt manner or 2) animate transition smoothly between 2 datasets fail remove first set of rects.

the d3 visualization can seen here: http://jackielu.github.io/d3-hist-v3/

when click on "percent impervious" histogram updates correctly abruptly , inelegantly. when click on "percent canopy" histogram updates nice transition previous set of rects remains

the code runs when "percent impervious" clicked follows:

function drawchartimperv(data) {    //grab values need , bin them   histogramdata = d3.layout.histogram()     .bins(xscale.ticks(10))     (data.features.map(function (d) {         return d.properties.imperv_p}));    window.histogramdata = histogramdata;    yscale.domain([0, d3.max(histogramdata, function(d) { return d.y; })])     .nice();   yaxis.scale(yscale);   yaxis2.call(yaxis);    xaxis2.select(".xlabel")     .text("impervious percentage")    bar.remove();    //bind data once   bar = svg.selectall(".bar")       .data(histogramdata)    //handle new elements   bar.enter()       .append("g")       .attr("class", "bar")       .attr("transform", function(d) { return "translate(" + xscale(d.x) + "," + yscale(d.y) + ")"; });    bar.append("rect")       .attr("x", 0)       .attr("y", function (d) { (height - padding) - yscale(d.y);})       .attr("width", xscale(histogramdata[0].dx)/2)       .attr("height", function (d) { return (height - padding) - yscale(d.y); })       //color bars using color function layer       .style("fill", "#309195")      // handle updated elements   bar.transition()     .duration(3000)     .attr("transform", function(d) { return "translate(" + xscale(d.x) + "," + yscale(d.y) + ")"; });      // handle removed elements   bar.exit()     .remove(); } 

the code allows smooth transition not remove old rects is:

function drawchartcan(data){    //grab values need , bin them   histogramdata = d3.layout.histogram()     .bins(xscale.ticks(10))     (data.features.map(function (d) {         return d.properties.can_p}));    window.histogramdata = histogramdata;    yscale.domain([0, d3.max(histogramdata, function(d) { return d.y; })])     .nice();   yaxis.scale(yscale);   yaxis2.call(yaxis);     xaxis2.select(".xlabel")     .text("canopy percentage")    //bind data once   bar = svg.selectall(".bar")       .data(histogramdata)    //handle new elements   bar.enter()       .append("g")       .attr("class", "bar")       .attr("transform", function(d) { return "translate(" + xscale(d.x) + "," + yscale(d.y) + ")"; });    bar.append("rect")       .attr("x", 0)       .attr("y", function (d) { (height - padding) - yscale(d.y);})       .attr("width", xscale(histogramdata[0].dx)/2)       .attr("height", function (d) { return (height - padding) - yscale(d.y); })       //color bars using color function layer       .style("fill", "#41ab5d")      // handle updated elements   bar.transition()     .duration(3000)     .attr("transform", function(d) { return "translate(" + xscale(d.x) + "," + yscale(d.y) + ")"; })      // handle removed elements   bar.exit()     .remove(); } 

the difference between 2 code blocks in drawchartimperv function there bar.remove() statement after y , x axes updated.

i suspect bar.remove() statement in wrong place in drawchartimperv function can't figure out should can have nice transition between 2 sets of bars, , remove old rects?

full code here: https://github.com/jackielu/d3-hist-v3

all suggestions , hints appreciated.