更新条形图和删除标签

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) 

    }); 
}