d3 update data and update graph

I am new to D3 but this is what I have found and I mainly figured this out from the sparklines example here.

Instead of drawing the line with this code:

vis.selectAll('path.line')
    .data([data])
    .enter()
    .append("svg:path")
    .attr("d", d3.svg.line().x(function(d, i) {return x(i); }).y(y));

generate the line separately:

 var line = d3.svg.line().x(function(d, i) { return x(i); }).y(y)

Then apply it to the data:

vis.selectAll('path.line')
    .data([data])
    .enter()
    .append("svg:path")
    .attr("d", line);

Then when you want to update the data you call:

 vis.selectAll("path")
   .data([data]) // set the new data
   .attr("d", line); // apply the new data values

The sparklines example also shows you how to animate it 🙂