Javascript 如何在循环中更新d3图形？

我尝试在循环日期值时动态更新此条形图：

var currDate = 20140101;
var dat = null;
d3.csv("TrafficOverTime.csv", type, function(error, data) {
  function next(){
      dat = data.filter(function(d){
        if (d.date === currDate){
            return d;
        }
          });
      currDate++;
  };
  function redraw(dat){
      y.domain([0, d3.max(dat, function(d) {
        return d.visitors; 
      })]);
      var barWidth = width / dat.length;
      var bar = chart.selectAll("g")
          .data(dat)
          .enter()
          .append("g")
          .attr("transform", function(d, i) { 
              return "translate(" + i * barWidth + ",0)"; 
          });

      bar.append("rect")
          .transition()
          .delay(100)   
          .attr("y", function(d) { return y(d.visitors); })
          .attr("height", function(d) { return height - y(d.visitors); })
          .attr("width", barWidth - 1);

      bar.append("text")
          .attr("x", barWidth / 2)
          .attr("y", function(d) { 
            return y(d.visitors) + 3; 
        })
          .attr("dy", ".75em")
          .text(function(d) { return d.visitors; });
    var x = d3.scale.ordinal()
        .range([height, 0]);
  };

  setInterval(function(){
      next();
      redraw(dat);
      }, 1000
  );

});

一个

console.log

语句显示数据在这些函数的范围内，并且根据过滤器进行了正确的更新，但是图形没有重新绘制。你有没有想过为什么会这样

示例数据：

page,date,visitors
home,20140101,60000
signup,20140101,40000
login,20140101,10000
home,20140102,70000
signup,20140102,50000
login,20140101,12000
home,20140103,65000
signup,20140103,45000
login,20140103,15000
...

---

您没有看到更改的原因是您拥有相同数量的数据元素，并且以后的数据与现有DOM元素匹配。因此，enter选择为空，不会发生任何事情

根据您的注释，重画的代码应该是这样的，绑定新数据，然后基于它更新现有元素，而不是附加新元素

var bar = chart.selectAll("g")
      .data(dat);

bar.select("rect")
   .transition()
   .delay(100)   
   .attr("y", function(d) { return y(d.visitors); })
   .attr("height", function(d) { return height - y(d.visitors); });

bar.select("text")
   .attr("y", function(d) { 
        return y(d.visitors) + 3; 
    })
   .text(function(d) { return d.visitors; });

---

数据与现有元素匹配，因此enter选择为空，不会发生任何事情。你想达到什么目的？@Larskothoff我想要一个条形图，它在我的数据中每天都会更新。你的意思是这些条形图应该一个接一个地显示出来吗？@Larskothoff更像这样，只是在以后的每一天，条形图都会从旧的一天的值转换为新的一天的值。