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