Çubuk grafiği güncelleme ve etiketleri kaldırma

Question

Bir çubuk grafiğim var, verileri güncellemek ve ayrıca koordinatların değerlerini güncellemek istiyorum. Şimdiye kadar sadece çubukları kaldırırken başarılı oldum ancak x-ekseni ve y-ekseni için etiketleri kaldıramıyorum. Svg.selectAll (".bar") kullanılır. Remove(); ancak sadece çubukları çıkardı ve x eksenini ve y eksenini bıraktı.

Eksenlerin etiketlerini nasıl çıkarırım?

d3.tsv("data.tsv", type, function (error, data) { 
     if (error) throw error; 

     x.domain(data.map(function (d) { 
      return d.letter; 
     })); 
     y.domain([0, d3.max(data, function (d) { 
      return d.frequency; 
     })]); 

     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("Frequency"); 

     svg.selectAll(".bar") 
       .data(data) 
       .enter().append("rect") 
       .attr("class", "bar") 
       .attr("x", function (d) { 
        return x(d.letter); 
       }) 
       .attr("width", x.rangeBand()) 
       .attr("y", function (d) { 
        return y(d.frequency); 
       }) 
       .attr("height", function (d) { 
        return height - y(d.frequency); 
       }); 
    }); 
function updateData(input) { 


     svg.selectAll(".bar").remove();} 

Answer 1

Öyle olmalı

svg.select all(".bar").data(data).exit().remove();

DÜZENLEME:

Bu güncelleme fonksiyonu nasıl olmalıdır: yardımcı olmak için

function updateData() { 

    d3.tsv("data2.tsv", function(error, data) { 
     if (error) throw error; 

     x.domain(data.map(function(d) { return d.letter; })); 
     y.domain([0, d3.max(data, function(d) { return d.frequency; })]); 

     var barEnter = svg.selectAll(".bar") 
       .data(data) 
       .enter(). 
       .append("rect"); 

     var barUpdate = svg.selectAll(".bar") 
       .data(data) 
       .attr("class", "bar") 
       .attr("x", function(d) { return x(d.letter); }) 
       .attr("width", x.rangeBand()) 
       .attr("y", function(d) { return y(d.frequency); }) 
       .attr("height", function(d) { return height - y(d.frequency); }); 

     var barExit = svg.selectAll(".bar") 
       .data(data) 
       .exit() 
       .remove(); 

     d3.transition(svg).select(".x.axis") 
      .transition() 
      .duration(100) 
      .call(xAxis) 

     d3.transition(svg).select(".y.axis") 
      .transition() 
      .duration(100) 
      .call(yAxis) 

    }); 
}