D3 v4更新条形图不会绘制最后一个条形图

Question

我是D3的新手，javascript不是我的第一语言，所以我会提前道歉，因为可能没有使用最好的js练习。

我正在尝试重新创建这个循环数据集的条形图，每次都添加条形图;但试图将其修改为D3 v4。

https://bl.ocks.org/RandomEtc/cff3610e7dd47bef2d01

我已经完成了它的工作，除了它会绘制最后一个条形图。它会在x轴上形成一个点;但没有条形图。

https://jsfiddle.net/jimdholland/07p8z8pb/35/

从我所看到的，我的迭代函数是抓取最后一个元素和数据值。

function cycler(data) {
    var slices = [];
  for (var i = 0; i < data.length; i++) {
    slices.push(data.slice(0, i+1));
  } //End for loop
  slices.forEach(function(slice, index){
    setTimeout(function(){
        drawChart(slice);
      console.log(slice);
    }, index * 300);
  }); //End for Each
};  // End cycler function

我创建了一个绘制图形的函数，我认为它可能与我没有正确清除旧数据。

function drawChart(data) {
  x.domain(data.map(function(d) { return d.Word; }));
  y.domain([0, d3.max(data, function(d) { return d.Positive; })]);

  svg.select(".xAxis").transition().duration(300).call(d3.axisBottom(x));
  svg.select(".yAxis").transition().duration(300).call(d3.axisLeft(y));

  //svg.select('.xaxis').transition().duration(300).call(xAxis);
  var bar = svg.selectAll("rect").data(data);

  bar.exit()
    .transition()
    .duration(300)
    .attr("y", innerHeight)
    .attr("height", 0)
    .style('fill-opacity', 1e-6)
    .remove();

  bar.enter().append("rect")
    .attr("class", "bar")
    .merge(bar)
    .attr("y", innerHeight)
    .attr("height", 0);

  bar.transition().duration(300)
    .attr("x", function(d) {return x(d.Word); })
    .attr("width", x.bandwidth())
    .attr("y", function(d) {return y(d.Positive); })
    .attr("height", function(d) {return height - y(d.Positive); });

};

感谢您的帮助，我也愿意更好地编写D3代码。

Answer 1

在cycler()功能中，您只需将for循环<更改为<=

for (var i = 0; i <= data.length; i++) {
    slices.push(data.slice(0, i+1));
  }