Aktualisieren Balkendiagramm und Entfernen von Etiketten

Question

Ich habe ein Balkendiagramm, ich möchte die Daten und auch die Werte der Koordinaten aktualisieren. Bis jetzt war ich nur erfolgreich beim Entfernen der Balken, aber ich kann die Beschriftungen für die X-Achse und die Y-Achse nicht entfernen. Ich habe svg.selectAll (". Bar"). Remove(); aber es entfernte nur die Balken und verließ die X-Achse und die Y-Achse.

Wie entferne ich die Beschriftungen der Achsen?

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

Es muss

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

EDIT:

Dies ist, wie Sie Ihre Update-Funktion sein sollte:

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) 

    }); 
}