d3条形图标签在更新新数据时没有更新图表

Question

以下代码每次点击按钮或下拉菜单中的选项时都会调用以更新我的d3条形图图形新数据。

图表中的条形根据新数据进行了适当更新，但条形图的标签没有被替换为新条形，而是显示了新旧标签。

请建议一些东西，以防止旧标签显示在条上。

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

您不添加类文本

这将选择具有类文本

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; }); 

现在取消对更新的所有文字

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