d3 - line

draw a single line update 1 - now draggable

CSS

svg {
    border: solid 1px;
}
line {
    stroke: red;
    stroke-width: 5px;
}

JavaScript

var vis = d3.select("body").append("svg").on("mousedown", mousedown)
    .on("mousemove", mousemove);

var line, isDown = false,
    lDown = false,
    isDragging = false,
    isResize = false,
    m1, m2, width = 800,
    height = 600;

/*var drag = d3.behavior.drag().on("drag", dragmove);

function dragmove() {
    var initialX1 = this.getAttribute("x1"),
        initialY1 = this.getAttribute("y1"),
        initialX2 = this.getAttribute("x2"),
        initialY2 = this.getAttribute("y2");

    if (isResize) {
        console.log('isResize');
    } else {
        d3.select(this)
            .attr("x1", +initialX1 + d3.event.dx)
            .attr("y1", +initialY1 + d3.event.dy)
            .attr("x2", +initialX2 + d3.event.dx)
            .attr("y2", +initialY2 + d3.event.dy);
    }
}*/

function mousedown() {
    m1 = d3.mouse(this);
    point = vis.append("circle")
        .attr("cx", m1[0])
        .attr("cy", m1[1])
        .attr("r", 5);
    if (!isDown && !isDragging) {
        var m = d3.mouse(this);
        line = vis.append("line")
            .attr("x1", m[0])
            .attr("y1", m[1])
            .attr("x2", m[0])
            .attr("y2", m[1]);
            //.call(drag);
    } else {
    		console.log('click point 3');
        isResize = false;
        lDown = !lDown;
        line.on("mousedown", mousedown2);
        function mousedown2() {
        console.log('click point 2');
            isDragging = true;
        }
        line.on("mouseup", mouseup);        
        function mouseup(e) {
        console.log('click point 4');
            isDragging = isDown = false;
            lDown = !lDown;
        }
        point.on("mousedown", mousedown3) 
        function mousedown3() {
            console.log('click point 5');
            isDragging = isDown = lDown = false;
            isResize = !isResize;
            console.log('isResize');
        }
        point.on("mouseup", mouseup2) 
        function mouseup2() {
        console.log('click point...