Comment dessiner un chemin en douceur du point de départ au point de fin dans D3.js

J'ai le code suivant qui trace une ligne de chemin d'accès basé sur la fonction 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);

Ce que je veux faire est de tracer en douceur à partir du premier noeud à noeud. Je veux aussi avoir une transition en douceur entre deux nœuds consécutifs et non pas seulement de mettre l'ensemble de la ligne à la fois. Tout simplement relier les points, à l'aide d'un crayon.

Toute aide serait vraiment appréciée.

source d'informationauteur Nasir