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

Question

I have been building a simple lightweight progress bar widget in d3, and ran across something odd when I tried to set up transitions for it:

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

the chunk in question is:

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

Instead of starting the transition immediately and then animating out to full width over 1500ms, it waits 1500ms then animates at the default duration. (you can see the behavior in the linked pen)

My guess and that of a colleague is that it's actually transitioning some other element with no actual changes first and then this one, causing the appearance of a delay, but I can't figure out why that would be.

Answer 1

The problem is that you've put a transition in your CSS that's interfering. In particular

transition: all 500ms;

is changing the transition you're trying to set up in D3.

Removing this CSS fixes the problem. Complete demo here .