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