d3.js多栏不刷新

Question

数据更改后，我的d3多栏不会刷新。如果有更多的柱子，它会在旧的末尾添加它，但不会删除旧的。如果有较少的条形，它根本不添加它。轴从新数据

一直改变

        var bars = svg.select(".chart-group")
            .selectAll(".state")
            .data(data);

        bars.enter().append("g")
            .attr("class", "state")
            .attr("transform", function (d) {
                return "translate(" + x0Scale(d[KEY]) + ",0)";
            });
        bars.exit().remove();
        bars.selectAll("rect")
            .data(function (d) {
                return d.ages;
            })
            .enter().append("rect")
            .attr("width", x1Scale.rangeBand())
            .attr("x", function (d) {
                return x1Scale(d[SEGMENT]);
            })
            .attr("y", function (d) {
                return yScale(d[DATA]);
            })
            .attr("height", function (d) {
                return chartH - yScale(d[DATA]);
            })
            .style("fill", function (d) {
                return color(d[SEGMENT]);
            });

修改 这是摆弄我的问题https://jsfiddle.net/wxw5zdws/

当整个容器被移除时，我实现了我的目标：

        if (container) {
            container.remove();
        }

我认为这是不好的做法，我的绘图栏方法存在问题。它应该使用旧元素并删除/添加usseless / needed元素。

这个酒吧出了什么问题？