Transitions

Basic Animations in D3, part2

    /**
     * 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.
     * Also showcases the ability to have basic animated sequences:
     * move right, move down, move left.
     */
    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)
      // new sequence move a little to the bottom
      .transition()
      .attr("cy", 200)
      // new sequence move a little to the left.
      .transition()
      .attr("cx", 50);