javascript - d3js 只更新一次

Question

我有一个可视化任务，我需要用 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);


                }); 

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

所以，在这种特殊情况下，我有国家和他们的数据作为数字，在第一次加载和第一次更新时它成功地显示了所有但当涉及到第二次更新时，它只为数据集中的第一个国家生成条形图。我已经花了好几个小时来解决这个问题。我知道我只是有一个小错误，但无法解决。

这里还有代码的 jsfiddle:https://jsfiddle.net/510ep9ux/4/

由于我是 d3.js 的新手，我可能不太了解更新概念。那么，有什么猜测吗？

Answer 1

已解决，使用两个单独的函数 textsInit 和 textsUpdate :

https://jsfiddle.net/qxqdp36x/2/

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

此外，变量 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 
  }

和:

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

编辑修复了一个小错误，更新了 asd 选择的数据。