d3拖动/能够在点击时重绘线条，否则绘制新线条

Question

我正在尝试将两个堆栈帖子合并在一起以使线条绘制工具正常工作，但是我遇到了问题。我想在这里合并这个线条图示例：

Live drawing of a line in D3.js

（第一个响应中有一个jsfiddle点击“live version”）。在这篇文章的圆圈属性：

How can I click to add or drag in D3?

（检查第一个响应中的jsfiddle）。

我想要的是当你画一条线时，它可以在完成后拖动。它也可以在完成后重新绘制，例如点击该线并向左/向右移动。

以下是我尝试合并这两个帖子：http://jsfiddle.net/da37B/291/

我认为问题出在mousedown（）函数中：

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);
}

正如您所看到的，当线条拖动单击时会创建一个新线条，并且单击该线条时也无法重新绘制线条。此外，拖动仅在线的方向上。