Accepted answer

You need to setup a reasonable start value for the animation:

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

button.on("click", function() { 
    svg.append("path")                     // Add the valueline2 path. 
        .attr("class", "line2")
        .attr("d", startvalueline2(data)); // set starting position
        .attr("d", valueline2(data));      // set end position

You might also have a look at Mike's path transitions page. To see how to implement smooth (non-wobbly) animations when using svg:path.

Related Query

More Query from same tag