D3.js implements first stage of transition but not 2nd

Question

Can anyone tell me why my circles transition to green but then do not transition to blue? I don't know if it's relevant but this is D3 on top of polymaps.

  marker.append("svg:circle")
        .attr("r", 4.5)
        .transition()
        .delay(2000)
        .style("fill", "green")
        .transition()
        .delay(2000)
        .style("fill", "blue")
        ;

score 1 · Accepted Answer · answered Jun 18 '14 at 16:39

The issue you're having comes from your delays. While the transition's delay will stop an animation for a given number of milliseconds, it won't stop the Javascript execution at all. Thus what's happening is the two transitions are happening simultaneously, and so you only see the transition to blue. Try making the second transition happen later, like this:

marker.append("svg:circle")
      .attr("r", 4.5)
      .transition()
      .delay(2000)
      .style("fill", "green")
      .transition()
      .delay(4000) // change to 4000 from 2000
      .style("fill", "blue");

Complete JSfiddle here.

score 1 · Answer 2 · answered Jun 18 '14 at 17:01

Here's another solution, which makes the second transition() call at the end of the first transition.

svg.append("circle")
    .attr("r", 100)
    .transition()
    .delay(2000)
    .style("fill", "green")
    .each("end", function() {
        d3.select(this).transition()
        .delay(2000)
        .style("fill", "blue")
    });

The documentation is at https://github.com/mbostock/d3/wiki/Transitions#wiki-each.

JSFiddle (based on the Fiddle in mdml's answer): http://jsfiddle.net/RuMdH/2/

D3.js implements first stage of transition but not 2nd

2 Answers2