D3.jsの遷移が意図したとおりに動作しない

Question

私は{x1：10、x2：20、y1：10、y2：20}のような異なるオブジェクトを持つ2つの配列をラインの座標として使用しています。最初の配列は2番目の配列になりますが、それは「親切」ですが、最終的には最終的な配列として見えません。

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); 
} 

私の最初の配列は、xは重要ではありません、我々は唯一のYさんは、変更する必要があり、私の二番目の配列はprojectMtで、mainMtです。その結果は、それが想定されているように見えるが、完全ではない図形である。ここで

は、その完全なコードです： http://www.carshel.com/tramonte/

編集：トランジションを見るためにスクロールします。

Answer 1

これは、データがIMを恐れている原因です。 https://jsfiddle.net/wasd3k5e/2/

を両方xとy座標：：ここではフィドルはちょうど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}) 

作品同様:)