d3.js - d3js update redraw stacked bar graph -

i trying make stacked bar graph through d3js , have update when new data passed through update function. call update function call graph , works fine. however, when change data , call again, erases "rect" elements graph (when console log data, appears passing through). how can make graph redrawn appropriately? have tried experimenting .remove() statement @ beginning, without data doesn't pass through when bars redrawn.

    function update(my_data) {     svg.selectall(".year").remove();     var year = svg.selectall(".year")           .data(my_data)         .enter().append("g")           .attr("class", "year")           .attr("transform", function(d) { return "translate(" + x0(d.year) + ",0)"; });     var bar = year.selectall(".bar")           .data( function(d){ return d.locations; });     bar         .enter().append("rect")           .attr("class", "bar")           .attr("width", x0.rangeband())           .attr("y", function(d) { return y(d.y1); })           .attr("height", function(d) { return y(d.y0) - y(d.y1); })           .style("fill", function(d) { return color(d.name); }); } update(data);  

it's hard tell you're doing cause question doesn't include data or dom. if included link work-in-progress jsfiddle or something.

if had guess what's going wrong, looks you're doing nested join each year gets bound g element , each location gets bound rect inside each g element.

the issue specifying enter behavior, not update behavior or exit behavior. result, when try redraw, nothing updates , nothing exits - new data elements added.

it seem why have add selectall().remove() redraw. removing everything, data elements trigger enter condition , added again.

take @ these tutorials better understand how enter/update/exit pattern works , how nested joins work.

general update pattern: https://bl.ocks.org/mbostock/3808218

nested selections: https://bost.ocks.org/mike/nest/

also, here jsfiddle wrote time ago demonstrate how use nested selections , general update pattern together:

https://jsfiddle.net/reblace/bwp8l/

var series = svg.selectall("g.row").data(data, function(d) { return d.key; });  /*  * section handles "enter" each row  */ // adding g element wrap svg elements of each row var seriesenter = series.enter().append("g"); seriesenter     .attr("class", "row")     .attr("transform", function(d, i){          return "translate(" + margin.left + "," + (margin.top + (span*i)) + ")";      })     .attr("opacity", 0).transition().duration(200).attr("opacity", 1);  // adding text label each series seriesenter.append("text")     .style("text-anchor", "end")     .attr("x", -6)     .attr("y", boxmargin + (boxdim/2))     .attr("dy", ".32em")     .text(function(d){ return d.key; });  // nested selection rects associated each row     var seriesenterrect = seriesenter.selectall("rect").data(function(d){ return d.values; });  // rect enter. don't need worry updates/exit when row added seriesenterrect.enter().append("rect")     .attr("fill", function(d){ return colorscale(d)})     .attr("x", function(d, i){ return i*span + boxmargin; })     .attr("y", boxmargin)     .attr("height", boxdim)     .attr("width", boxdim);  /*  * section handles updates each row  */ var seriesupdaterect = series.selectall("rect").data(function(d){ return d.values});  // rect update (will handle updates after enter)  // rect enter seriesupdaterect.enter().append("rect")     .attr("x", function(d, i){ return i*span + boxmargin; })     .attr("y", boxmargin)     .attr("height", boxdim)     .attr("width", boxdim);  // rect enter + update seriesupdaterect     .attr("fill", function(d){ return colorscale(d)});  // exit seriesupdaterect.exit();  /*  * section handles row exit  */ series.exit()     .attr("opacity", 1)     .transition().duration(200).attr("opacity", 0)         .remove();