更新條形圖和刪除標籤

Question

我有條形圖，我想更新數據和座標值。到目前爲止，我只是成功地刪除了欄，但我無法刪除x軸和y軸的標籤。我用svg.selectAll（「.bar」）。remove（）; ，但它只刪除了條，並留下了x軸和y軸。

如何刪除軸的標籤？

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

它必須是

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

編輯：

這是你的更新功能應該如何：

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) 

    }); 
}