score:11

Accepted answer

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

var startvalueline2 = d3.svg.line()
    .x(function(d) { return x(d.date); })
    .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
        .transition()
        .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