D3 line transition starting at incorrect point

Question

I am working on my first d3 project and running into a seemingly simply issue.

I have tried to transition a line from point x1, y1 to x2, y2. I would like to animate it to start at the first point and draw itself out to the second point.

The issue is that when my transition starts, it creates a line connecting x1, y1 to the top left corner of the window and then swings the whole line to connect to x2, y2.

If anyone could assist me in correcting the transition, that would be greatly appreciated!!

// 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

If you want the lines to stretch out to their final destination then you need to set both ends of the line (x1/y1, x2/y2) to the same location before transitioning.

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)      

Example : http://jsbin.com/akAZEjIW/1/edit