d3 bar chart labels not getting updated on updating the chart with the new data

Question

Below is the code getting called everytime when I click on a button or an option in the drop down menu in order to update my d3 bar chart graph with the new data.

The bars in the chart are properly updated according to the new data, but the labels of the bar chart are not getting replaced with the new ones, instead both old and new labels are displayed.

Please suggest something so that old labels are not shown on bars.

function updateGraph(data) {

          // scale the range of the data
          x.domain(data.map(function(d) { return d.Country; }));
          y.domain([0, d3.max(data, function(d) { return d.Value; })]);

          var bars = svg.selectAll(".bar").data(data);

          bars.enter().append("rect").attr("class", "bar");

          bars.transition().duration(200).attr("x", function(d) { return x(d.Country); })
          .attr("width", x.rangeBand())
          .attr("y", function(d) {return y(d.Value); })
          .attr("height", function(d) { return height - y(d.Value); });

          var texts = svg.selectAll(".text").data(data);

          texts.enter().append("text").attr("class","label").attr("x", (function(d) { return x(d.Country) + x.rangeBand() / 2 ; }  ))
                .attr("y", function(d) { return y(d.Value) + 1; })
                .attr("dy", ".75em")
                .text(function(d) { return d.Value; });  


          texts.transition().duration(200).attr("x", (function(d) { return x(d.Country) + x.rangeBand() / 2 ; }  ))
                .attr("y", function(d) { return y(d.Value) + 1; })
                .attr("dy", ".75em")
                .text(function(d) { return d.Value; });  

          bars.exit().remove();

          svg.selectAll(".axis").remove();

          svg.append("g")
             .attr("class", "x axis")
             .attr("transform", "translate(0," + height + ")")
             .call(xAxis);

          svg.append("g")
              .attr("class", "y axis")
              .call(yAxis)
              .append("text")
              .attr("transform", "rotate(-90)")
              .attr("y", 6)
              .attr("dy", ".71em")
              .style("text-anchor", "end")
              .text("Value");

        }

Answer 1

You are not adding class to the text

This will select all DOM with class text

var texts = svg.selectAll(".text").data(data);



texts
.enter()
.append("text")
.attr("class","label text") <-- add text class here
.attr("x", (function(d) { return x(d.Country) + x.rangeBand() / 2 ; }  ))
                .attr("y", function(d) { return y(d.Value) + 1; })
                .attr("dy", ".75em")
                .text(function(d) { return d.Value; }); 

Now to remove all text on update

bars.exit().remove();
texts.exit().remove(); <--- add this to remove exited text