Jak narysować ścieżkę płynnie od punktu początkowego do punktu końcowego w D3.js

Question

Mam następujący kod, który działki ścieżkę korekty na podstawie funkcji sinus:

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

var margin = {top: 10, right: 10, bottom: 20, left: 40}, 
    width = 960 - margin.left - margin.right, 
    height = 500 - margin.top - margin.bottom; 

var x = d3.scale.linear() 
    .domain([0, 1]) 
    .range([0, width]); 

var y = d3.scale.linear() 
    .domain([0, 1]) 
    .range([height, 0]); 


var line = d3.svg.line() 
      .interpolate('linear') 
      .x(function(d){ return x(d.x) }) 
      .y(function(d){ return y(d.y) }); 

var svg = d3.select("body").append("svg") 
    .datum(data) 
    .attr("width", width + margin.left + margin.right) 
    .attr("height", height + margin.top + margin.bottom) 
    .append("g") 
    .attr("transform", "translate(" + margin.left + "," + margin.top + ")"); 

svg.append("path") 
    .attr("class", "line") 
    .attr("d", line); 

svg.selectAll('.point') 
    .data(data) 
    .enter().append("svg:circle") 
    .attr("cx", function(d, i){ return x(d.x)}) 
    .attr("cy", function(d, i){ return y(d.y)}) 
    .attr('r', 4); 

Co chcę zrobić, to go wykreślić płynnie od pierwszego węzła do ostatniego węzła. Chcę również uzyskać płynne przejście między dwoma kolejnymi węzłami, a nie tylko umieścić całą linię naraz. Po prostu jak łączenie kropek za pomocą ołówka.

Każda pomoc będzie naprawdę doceniana.

Answer 1

można animować ścieżki dość łatwo stroke-dashoffset i 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