Transitions

Basic Animations in D3, part3

    /**
     * Script draws circle, 2 seconds after drawing the circle, move the circle to the right.
     * set the time moving to the right for about 1.5 secs.
     * Additional this script showcases event listener "each" function
     * At the start of the moving animation color the circle green.
     * At the end of the moving animation color the circle red.
     */
    var width = 500;
    var height = 500;
    var canvas = d3.select("body")
                  .append("svg")
                  .attr("width", width)
                  .attr("height", height);
    var circle = canvas.append("circle")
                  .attr("cx", 50)
                  .attr("cy", 50)
                  .attr("r", 25);
    // on circle object render
    circle.transition()
      // move circle to the right
      .attr("cx", 150)
      // set the length of time moving to 1.5 secs (1500 milliseconds)
      .duration(1500)
      // but start the transition 2 seconds after object render
      .delay(2000)
      // At the start of the moving animation color the circle green.
      .each("start", function() { d3.select(this).attr("fill", "green") } )
      // At the end of the moving animation color the circle red.
      .each("end", function() { d3.select(this).attr("fill", "red") } );