d3 draggable svg path line segment

Question

I have the task of drawing svg shapes on mousedown using d3. I've been trying to figure out how to make them draggable. I got svg line down (see here) but I actually need to use paths instead. I've gotten pretty close but I'm stumped. Can someone please help me out? Here's some of the code and this is my fiddle.

var drag = d3.behavior.drag().on('drag', dragmove);
function dragmove() {
    isDown = false;
    m3 = d3.mouse(this);
    var newArray = [ {x: (m1[0] + d3.event.dx), y: (m1[1] + d3.event.dy)},
                     {x: (m2[0] + d3.event.dx), y: (m2[1] + d3.event.dy)} ]; 
    line.attr('d', lineFunction(newArray));    
}

mousedown

pathArray = [ {'x': m1[0], 'y': m1[1]}, {'x': m1[0], 'y': m1[1]} ];
    line = svg.append('path')
        .attr('d', lineFunction(pathArray))
        .attr({'stroke': 'purple', 'stroke-width': 5, 'fill': 'none'})
        .call(drag);

mousemove

m2 = d3.mouse(this);
    pathArray[1] = {'x': m2[0], 'y': m2[1]};
    line.attr('d', lineFunction(pathArray));

Answer 1

Well, I was super close. This is what I changed in dragmove. It works nicely now.

var newArray = [ {x: (m1[0] += d3.event.dx), y: (m1[1] += d3.event.dy)},
                 {x: (m2[0] += d3.event.dx), y: (m2[1] += d3.event.dy)} ];