Obviously the issue is that the line isn t updating as the mouse moves. It s likely I m going about this completely wrong, so any sort of guidance would be appreciated. Thanks!

UPDATE I see there is d3.behavior.drag extensions, but I m not sure if that s exactly the type of thing I d need or not (since the user isn t exactly interacting with any objects, rather creating a new one on the fly (line object))

UPDATE 2 Okay, I m trying to go about it a bit differently here, and it s almost there I think. Although I m sure there s a much better way to do this. What s below is close (but it doesn t draw the lines).

    var shapeCoords = [
              [10, 10], [200, 10], [200, 200], [10, 200], [5, 100]
              ];

$(function() {
var container = $( #container );

// D3
console.log("D3: ", d3);

// Draw Shape
var svg = d3.select( #container ).append( svg:svg ).attr( height , 600).attr( width , 800);


var line = d3.svg.line()
                .x(function(d) { return d[0]; })
                .y(function(d) { return d[1]; })
                .interpolate( linear );

svg
    .data(shapeCoords)
    .append( svg:path )
    .attr( d , line(shapeCoords) +  Z )
    .style( stroke-width , 1)
    .style( stroke ,  steelblue )
    .style( fill ,  rgba(120, 220, 54, 0.2) );



// Draw Lines

var lineData = [];

var line = d3.svg.line()
                .x(function(d) { return d.x; })
                .y(function(d) { return d.y; })
                .interpolate("linear");

var redrawLine = function() {
    var svgLines = svg.selectAll( path )
                        .data(lineData);


    svgLines.enter()
            .append( path )
            .attr( d , line(lineData))
            .attr( class ,  my-lines );

    svgLines.exit()
            .remove();

    console.debug("lineData", lineData);
};

var mouseIsDown = false;  
container.on( mousedown mouseup mousemove , function(e) {
    if (e.type ==  mousedown ) {
        mouseIsDown = true; 
        lineData[0] = {x:e.offsetX, y:e.offsetY};
        redrawLine();
    } else if (e.type ==  mouseup  ){
        mouseIsDown = false;
        lineData[1] = {x:e.offsetX, y:e.offsetY};
        redrawLine();
    } else if (e.type ==  mousemove ) {
        if (mouseIsDown) {
            lineData[1] = {x:e.offsetX, y:e.offsetY};
            redrawLine();    
        }
    }
});


});