javascript - 更新条形图并删除标签

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)

    });
}