d3 path

draw path on mousedown

JavaScript

var svg = d3.select('body').append('svg').attr({'width': 500, 'height': 500})
            .style({'border': 'solid 1px black'});

var m, m1, m2, line, pathArray = [], isDown = false, lineDown = false, isDragging = false;

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

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));
    //console.log(m1[0],m2[0],m3[0]); 
    //console.log(m2[0]-m1[0] + d3.event.dx, m2[0] + d3.event.dx);  
}

svg.on('mousedown', mousedown);
function mousedown() {
    if(!isDown && !isDragging){
        m1 = d3.mouse(this);
        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);
    } else {
        console.log('**else**');
        line.on('mousedown', mousedownLine);
        function mousedownLine() {
            lineDown = !lineDown;
            isDragging = true;
            console.log('**mousedownLine**');
        }
        line.on('mouseup', mouseupLine);
        function mouseupLine() {
            //isDown = isDragging = false;
            //lineDown = !lineDown;
            console.log('**mouseupLine**');
        }
    }
    isDown = !isDown;
}
svg.on('mousemove', mousemove);
function mousemove() {
    if(isDown){
        m2 = d3.mouse(this);
        pathArray[1] = {'x': m2[0], 'y': m2[1]};
        line.attr('d', lineFunction(pathArray));
    }
}