D3線過渡從錯誤點開始

Question

我正在做我的第一個d3項目，並且遇到了一個看似簡單的問題。

我試圖將一條線從點x1，y1過渡到x2，y2。 我想對其進行動畫處理，使其從第一點開始，然后吸引自己到第二點。

問題是，當我的過渡開始時，它將創建一條將x1，y1連接到窗口左上角的線，然后擺動整條線以連接到x2，y2。

如果有人可以幫助我糾正過渡問題，將不勝感激！

// adding the line  
var lines = svg.selectAll("line")
    .data(dataset)
    .enter()
    .append("svg:line")

// line attributes
lines.attr(
           "x1", start_x)
           .attr("y1", start_y)
           .attr("x2", end_x)
           .attr("y2", end_y)
           .transition()
           .duration(600)             

Answer 1

如果希望線延伸到其最終目的地，則需要在轉換之前將線的兩端（x1 / y1，x2 / y2）設置在相同位置。

lines.attr(
           "x1", start_x)
           .attr("y1", start_y)
           .attr("x2", start_x)
           .attr("y2", start_y)
           .transition()
           .duration(600)    
           .attr("x2", end_x)
           .attr("y2", end_y)      

示例： http ： //jsbin.com/akAZEjIW/1/edit