d3js很好的過渡線，加了分

Question

說我有一個path我d3像創建：

line = d3.line() 
    .curve(d3.curveLinear) 
    .x(function(d) { return x(d.x);}) 
    .y(function(d) { return y(d.y); }); 

data = [{x: 0, y: 0}, {x: 5, y: 5}, {x:10, y:10}]; 

myLine = svg.append("path") 
     .attr("fill", "none") 
     .attr("stroke", "steelblue") 
     .datum(data) 
     .attr("d", line); 

這使得從0到10，現在一個漂亮的斜線，如果更新我的資料做出一些改變並添加一些要點：

data = [{x: 1, y: 1}, {x:2, y:3}, {x: 6, y: 7}, {x:9, y:9}]; 

而且更新我行

myLine.datum(data).transition().duration(1000).attr("d", line); 

它給出了一個奇怪的過渡，它將現有路徑滑動到適合新路徑的前三個點，並且最後將點添加到最後。

同樣，如果我更新它有更少的點，它縮短行，然後滑過其餘的部分，而不是隻是重新塑造它所在的行。

我明白爲什麼發生這種情況，但我想知道是否有辦法創建更平滑的轉換。

Answer 1

你應該看看這個page這github

.attrTween('d', function() { 
    return d3.interpolatePath(line(data), line(data2)); 
}); 

看一看這個fiddle