Javascript D3.JS直方图：更新数据时对齐条出错

我试图用D3.JS更新直方图中的数据。我在更新数据时遇到了一个问题，数据更新后，条形图不再与x轴对齐

以下是指向实时演示的链接：

如有任何建议，将不胜感激。

-

-您的意思可能是

。选择
，而不是
。追加

每次图表更新时，您当前的代码都会追加一组新的
，而旧的代码没有正确对齐


请注意，我在右边的开发工具中运行的d3选项的大小正在增加

修复后，它看起来如下所示：

编辑
index.html
中的第232-242行，使
条
不被调用两次修复了问题，并更改了
。将
附加到
。选择

以前的代码：

bar.data(newhistdata)
  .transition()
  .duration(1000)
  .attr("transform", function(d,i) {
      return "translate(" + x2(i * binsize + minbin) + "," + y(d.numFlips) + ")"; 
    });
bar.append("rect")
  .attr("x", x(binmargin))
  .attr("width", x(binsize - 2 * binmargin))
  .attr("height", function(d) { return height - y(d.numFlips); });

bar.data(newhistdata)
  .transition()
  .duration(1000)
  .attr("transform", function(d,i) {
      return "translate(" + x2(i * binsize + minbin) + "," + y(d.numFlips) + ")"; 
    })
  .select('rect')
  .attr('x', x(binmargin))
  .attr("width", x(binsize - 2 * binmargin))
  .attr("height", function(d) { return height - y(d.numFlips); });

编辑：

bar.data(newhistdata)
  .transition()
  .duration(1000)
  .attr("transform", function(d,i) {
      return "translate(" + x2(i * binsize + minbin) + "," + y(d.numFlips) + ")"; 
    });
bar.append("rect")
  .attr("x", x(binmargin))
  .attr("width", x(binsize - 2 * binmargin))
  .attr("height", function(d) { return height - y(d.numFlips); });

bar.data(newhistdata)
  .transition()
  .duration(1000)
  .attr("transform", function(d,i) {
      return "translate(" + x2(i * binsize + minbin) + "," + y(d.numFlips) + ")"; 
    })
  .select('rect')
  .attr('x', x(binmargin))
  .attr("width", x(binsize - 2 * binmargin))
  .attr("height", function(d) { return height - y(d.numFlips); });

另一个问题是如何正确地转换条形图+1为动画GIF！实际上，我意识到删除
bar.data
和
bar.append
之间的空格解决了这个问题。不知何故，两次调用
bar
就产生了错误。