How can I click to add or drag in D3?

http://stackoverflow.com/questions/19911514/how-can-i-click-to-add-or-drag-in-d3

HTML

<script src="http://d3js.org/d3.v3.min.js"></script>
<body></body>

CSS

dot{
    fill:lightblue;
    stroke:#999999;
  }

line {
    stroke: steelblue;
    stroke-width: 2px;
    stroke-linecap: round;
}

JavaScript

var line;

var vis = d3.select("body").append("svg") 
    .attr("width", 600)
    .attr("height", 400)
    .on("mousedown", mousedown)
    .on("mouseup", mouseup);

function mousedown() {
    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])
        .style("cursor", "pointer")
        .call(drag)
        .on("click", click);
    
    vis.on("mousemove", mousemove);
}

function click(){
  // Ignore the click event if it was suppressed
  if (d3.event.defaultPrevented) return stopPropagation();

  // Extract the click location\    
  var point = d3.mouse(this)
  , p = {x: point[0], y: point[1] };
}

function mousemove() {
    var m = d3.mouse(this);
    line.attr("x2", m[0])
        .attr("y2", m[1]);
}

function mouseup() {
    vis.on("mousemove", null);
}

// Add a background
vis.append("rect")
  .attr("width", 700)
  .attr("height", 400)
  .style("stroke", "#999999")
  .style("fill", "#F6F6F6")

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

function dragmove(d) {
  var x = d3.event.x;
  var y = d3.event.y;
  d3.select(this).attr("transform", "translate(" + x + "," + y + ")");
}