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

これはアップデート

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