为什么.duration在d3中追加元素后会起到.delay的作用？

Question

我在d3中构建了一个简单的轻量级进度条小部件，当我尝试为它设置转换时遇到了奇怪的事情：

http://codepen.io/emoody/pen/oJFGI?editors=101

有问题的块是：

  enter //the name of my d3 function
  .append("div")
    .attr("class", "progress")
    .style("width",0)
  .transition()
    .duration(1500)
    .style("width", function(d) { return x(d) * (100/maxRange) + "%"; });

不是立即开始转换，然后将动画设置为超过1500毫秒的全宽，而是等待1500毫秒，然后以默认持续时间设置动画。 （你可以看到链接笔中的行为）

我的猜测和同事的猜测是，它实际上是在转换其他元素而没有先实际更改然后再转换，导致出现延迟，但我无法弄清楚为什么会这样会的。

Answer 1

问题在于，您已经在CSS中进行了干预过渡。特别是

transition: all 500ms;

正在改变您尝试在D3中设置的转换。

删除此CSS可解决此问题。完整演示here。