How to draw a path smoothly from start point to end point in D3.js

Question

I have the following code which plots a line path based on sine function:

var data = d3.range(40).map(function(i) {
  return {x: i / 39, y: (Math.sin(i / 3)          


        

Answer 1

You can animate paths quite easily with stroke-dashoffset and and path.getTotalLength()

var totalLength = path.node().getTotalLength();

path
  .attr("stroke-dasharray", totalLength + " " + totalLength)
  .attr("stroke-dashoffset", totalLength)
  .transition()
    .duration(2000)
    .ease("linear")
    .attr("stroke-dashoffset", 0);

http://bl.ocks.org/4063326