更新条形图并删除标签

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)
    });
}