Javascript d3js只更新一次

我有一个可视化任务，我需要用d3.js完成它。这是我的密码

                var w = 700;
                var h = 500;
                var offset = 100;
                var padding = 20;
                var colors = d3.scale.category10();
                var svg = d3.select("body")
                    .append("svg")
                    .attr("width", w)
                    .attr("height", h);




                var texts = function(ds,ds2){
                    var stack = d3.layout.stack();
                    stack_data = stack(ds);

                    var xScale = d3.scale.ordinal()
                        .domain(d3.range(ds[0].length))
                        .rangeRoundBands([0, w-offset], 0.50);


                    var yScale = d3.scale.linear()
                        .domain([0,             
                            d3.max(stack_data, function(d) {
                                return d3.max(d, function(d) {
                                    return d.y0 + d.y -20;
                                });
                            })
                        ])
                        .range([padding, h-50]);

                    var xAxis = d3.svg.axis()
                        .scale(xScale)
                        .orient("bottom")
                        .ticks(ds[0].length);

                    gs = svg.selectAll("g").data(stack_data);

                    for (var i5 = 0; i5 < ds.length; i5++) {
                        gs.enter()
                        .append("g")
                        .attr("class", "stacked_bars")
                        .attr("fill", function(d, i) {
                            return colors(i);
                        });

                        asd = gs.selectAll("rect").data(function(d) { return d; });

                        asd.enter().append("rect");

                        asd.transition()
                            .duration(1000)
                            .attr("x", function(d, i) {
                                return xScale(i);
                            })
                            .attr("y", function(d) {
                                return h - yScale(d.y0) - yScale(d.y);
                            })
                            .attr("height", function(d) {
                                return yScale(d.y);
                            })
                            .attr("width", xScale.rangeBand())
                            .attr("class", "rectbar");

                    };

                    gs.append("g")  // add a group element to the svg
                        .attr("class", "axis") //Assign class "axis" to group
                        .attr("transform", "translate(0," + (h - padding) + ")")  // shift the axis to bottom
                        .call(xAxis);   // call the axis function 

                    gs.exit().remove();
}


                res = dataGenerator("Europe");
                dataset = res[0];
                dataset2 = res[1];

                texts(dataset,dataset2);

            d3.select("#selector").on("change", function() {
                    cont = d3.select(this).property('value');
                    res = dataGenerator(cont)

                    dataset = res[0]
                    dataset2 = res[1]

                    //svg.selectAll(".sym").remove()

                    texts(dataset,dataset2);


                }); 

var w=700；
var h=500；
var偏移=100；
var=20；
var colors=d3.scale.category10（）；
var svg=d3.选择（“主体”）
.append（“svg”）
.attr（“宽度”，w）
.attr（“高度”，h）；
变量文本=功能（ds、ds2）{
var stack=d3.layout.stack（）；
堆栈_数据=堆栈（ds）；
var xScale=d3.scale.ordinal（）
.domain（d3.range（ds[0].长度））
.rangeRoundBands（[0，w偏移]，0.50）；
var yScale=d3.scale.linear（）
.domain（[0，
d3.max（堆栈_数据，函数（d）{
返回d3.max（d，函数（d）{
返回d.y0+d.y-20；
});
})
])
.范围（[填充，h-50]）；
var xAxis=d3.svg.axis（）
.scale（xScale）
.orient（“底部”）
.ticks（ds[0]。长度）；
gs=svg。选择全部（“g”）.数据（堆栈数据）；
对于（var i5=0；i5

它基本上获取数据并生成堆叠的条形图。当用户在页面上使用select元素时，它会更新数据并生成新结果。它成功地获得了第一个结果，当用户选择另一个选项时，它也会使它发生。但当用户再次尝试使用“选择零件”时。它仅为数据集的第一项生成条形图

所以，在这个特殊的例子中，我将国家和它们的数据作为数字，在第一次加载和第一次更新时，它成功地显示了所有，但在第二次更新时，它只为数据集中的第一个国家生成条形图。我已经花了好几个小时试图解决这个问题。我知道我只犯了一点小错误，但无法解决

下面是代码的JSFIDLE：

由于我是d3.js的新手，我可能不太理解更新的概念。

---

那么，有什么猜测吗？

通过使用两个单独的函数

textsini

和

textsUpdate

：

本质上，您需要分离初始化和更新逻辑，并避免在更新时重新创建元素，这会导致意外行为

此外，变量

gs

和

asd

需要是全局变量，以便两个函数都可以访问

var textsInit = function(ds, ds2) {

    var stack = d3.layout.stack();
    stack_data = stack(ds);

    var xScale = d3.scale.ordinal()
      .domain(d3.range(ds[0].length))
      .rangeRoundBands([0, w - offset], 0.50);


    var yScale = d3.scale.linear()
      .domain([0,
        d3.max(stack_data, function(d) {
          return d3.max(d, function(d) {
            return d.y0 + d.y - 20;
          });
        })
      ])
      .range([padding, h - 50]);

    var xAxis = d3.svg.axis()
      .scale(xScale)
      .orient("bottom")
      .ticks(ds[0].length);
    gs = svg.selectAll("g").data(stack_data);

    bars = gs.enter();
    bars.append("g")
      .attr("class", "stacked_bars")
      .attr("fill", function(d, i) {
        return colors(i);
      });

    asd = gs.selectAll("rect").data(function(d) {
      return d;
    });

    asd.enter().append("rect");

    asd.transition()
      .duration(1000)
      .attr("x", function(d, i) {
        return xScale(i);
      })
      .attr("y", function(d) {
        return h - yScale(d.y0) - yScale(d.y);
      })
      .attr("height", function(d) {
        return yScale(d.y);
      })
      .attr("width", xScale.rangeBand())
      .attr("class", "rectbar");

    gs.append("g") // add a group element to the svg
      .attr("class", "axis") //Assign class "axis" to group
      .attr("transform", "translate(0," + (h - padding) + ")") // shift the axis to bottom
      .call(xAxis); // call the axis function 
  }

以及：

---

编辑以修复一个小错误，更新

asd

选择的数据。

我对您的代码做了两个简单但关键的更改

从

到

轴还包含在

g

元素中，因此您必须确保只选择用于数据的元素，而不是不相关的元素

从

到

如果进入浏览器检查器，您将看到每个

堆叠的\u条
元素都有一个axis元素，显然只需要1。看起来只有一个轴，因为它们是绝对定位的，并且堆叠在彼此的顶部

我更改了它，以便在创建svg时附加轴，并且每次选择新数据时，轴都会自我更新
 你能给我们做一个三明治吗？如果我能用代码进行实验，就更容易给出答案。非常感谢，但是Eric的答案更接近我想要的，我选择了他的答案作为正确答案。
var textsUpdate = function(ds, ds2) {
    var stack = d3.layout.stack();
    stack_data = stack(ds);

    var xScale = d3.scale.ordinal()
      .domain(d3.range(ds[0].length))
      .rangeRoundBands([0, w - offset], 0.50);

    var yScale = d3.scale.linear()
      .domain([0,
        d3.max(stack_data, function(d) {
          return d3.max(d, function(d) {
            return d.y0 + d.y - 20;
          });
        })
      ])
      .range([padding, h - 50]);

    gs.data(stack_data);
        asd = gs.selectAll("rect").data(function(d) { return d; });
      asd.transition()
        .duration(1000)
        .attr("x", function(d, i) {
          return xScale(i);
        })
        .attr("y", function(d) {
          return h - yScale(d.y0) - yScale(d.y);
        })
        .attr("height", function(d) {
          return yScale(d.y);
        })
        .attr("width", xScale.rangeBand())
        .attr("class", "rectbar");
  }

gs = svg.selectAll("g").data(stack_data);

gs = svg.selectAll("g.stacked_bars").data(stack_data);

gs.append("g")
.attr("class", "axis") 
.attr("transform", "translate(0," + (h - padding) + ")")
.call(xAxis);

svg.append("g")
.attr("class", "axis") 
.attr("transform", "translate(0," + (h - padding) + ")")
.call(xAxis);