How Do I Animate Line In D3.Js

[Andy_555666]

So my line extends from one side of my graph to the other, but it doesnt really animate through each data point, I assume I have to add a loop somewhere.

Heres the relevant code. Any assistance would be hugely appreciated!!!

//assign start coordinates for each piece of data   
var startValueline = d3.svg.line()
    .x(0)
    .y(0);

//assigns coordinates for each piece of data    
var valueline = d3.svg.line()
    .interpolate("interpolation")
    .x(function(d) { return x(d.date); })
    .y(function(d) { return y(d.close); });

// csv callback function
d3.csv("myData2.csv", function(data) {
    data.forEach(function(d) {
    d.date = parseDate(d.date);
    d.close = +d.close;});


//CLIKC FUNCTION WHICH SHOULD ANIMATE LINE      
button.on("click", function() { 
    svg.append("path")                     // Add the valueline path. 
        .attr("class", "line")
        .attr("d", startValueline(data)) // set starting position
      .transition()
        .duration(2000)
        .ease("linear")
        .attr("d", valueline(data));    // set end position;
});

//myData.csv STORED IN A SEPERATE .CSV FILE
myData.csv
date,close
1-May-12,58.13
30-Apr-12,53.98
27-Apr-12,67.00
26-Apr-12,89.70
25-Apr-12,99.00
24-Apr-12,130.28
23-Apr-12,166.70
20-Apr-12,234.98
19-Apr-12,345.44
18-Apr-12,443.34
17-Apr-12,543.70
16-Apr-12,580.13
13-Apr-12,605.23
12-Apr-12,622.77
11-Apr-12,626.20
10-Apr-12,628.44
9-Apr-12,636.23
5-Apr-12,633.68
4-Apr-12,624.31
3-Apr-12,629.32
2-Apr-12,618.63
30-Mar-12,599.55
29-Mar-12,609.86
28-Mar-12,617.62
27-Mar-12,614.48
26-Mar-12,606.98