Переход D3.js не работает по назначению

Question

У меня есть 2 массива с различными объектами, такими как {x1: 10, x2: 20, y1: 10, y2: 20}, которые являются координатами для линий, я хочу, чтобы SVG переходил из моего первый массив во второй, однако он «добрый» от этого, но в конце концов он не выглядит как мой последний массив.

if($percentageComplete<=25&&$percentageComplete>00) 
    { 
    var index =0; 
var index2=0; 
circle.data(projectMt).transition() 
.attr("y1", function (d) { 
    var actual = mainMt[i].y1; 
    var cambio = d.y1; 
    //console.log("Y1 "+mainMt[index].y1) 
    //console.log("Actual: "+actual); 
    //console.log("Cambio: "+cambio); 
    index++; 
    //console.log("Y1 ACTUANDO"); 
    //console.log(actual-(cambio*$percentageComplete)/25); 
    return (cambio); 

}) 
    .attr("y2", function (d) { 
    var actual = mainMt[i].y2; 
    var cambio = d.y2; 
    //console.log("Y2 "+mainMt[index2].y2) 
    //console.log("Actual: "+actual); 
    //console.log("Cambio: "+cambio); 
    index2++; 
    //console.log("Y2 ACTUANDO"); 
    //console.log(actual-(cambio*$percentageComplete)/25); 
    return (cambio); 

}); 
    console.log(index+""+index2); 
} 

Мой первый массив mainMt, мой второй массив projectMt, нам нужно только у для изменения, х не важны. В результате получается фигура, которая выглядит так, как предполагается, но не полностью.

Вот полный код, который: http://www.carshel.com/tramonte/

Edit: Scroll, чтобы увидеть переход.

Answer 1

Это то, что вы выдаете, испугавшись. Здесь скрипку просто редактируя y координаты: https://jsfiddle.net/wasd3k5e/2/

И как x и y координаты: https://jsfiddle.net/wasd3k5e/1/

Таким образом, даже если он не выглядит хорошо, это потому, что вы только обновление y координат. Это то, что показывают ваши данные.

Я редактировал свой переход и только прибавил:

circle.transition(500) 
    //.attr('x1',function(d,i){ return projectMt[i].x1}) 
    .attr('y1',function(d,i){ return projectMt[i].y1}) 
    //.attr('x2',function(d,i){ return projectMt[i].x2}) 
    .attr('y2',function(d,i){ return projectMt[i].y2}) 

работает аналогичным образом :)