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