Question

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

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
...

Answer 1

您没有看到更改的原因是您拥有相同数量的数据元素，后来的数据与现有DOM元素匹配。因此，输入选择为空，没有任何反应。

根据您的评论，重绘的代码应该看起来像这样，绑定新数据，然后根据它更新现有元素，而不是追加新元素。

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

如何在循环中更新d3图？

1 个答案: