Javascript 为什么在d3中添加元素后.duration会充当.delay？

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

问题是：

  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) + "%"; });

它不是立即开始过渡，然后在1500ms以上设置全宽动画，而是等待1500ms，然后以默认持续时间设置动画。（可以在链接笔中看到该行为）

---

我和一位同事的猜测是，它实际上是在转换其他一些没有实际更改的元素，然后是这个元素，导致出现延迟，但我不明白为什么会出现延迟。

问题是您在CSS中放置了一个干扰的转换。特别是

transition: all 500ms;

正在更改您试图在D3中设置的转换

---

删除此CSS可修复此问题。完成演示。

#facepalm现在我知道了！我从来没有想过CSS会覆盖JS转换，应该检查一下……技术上它不会覆盖它，但会在D3转换完成后发生。这就是为什么

.duration（）

看起来像

.delay（）

。