D3.js d3拖动/能够在单击时重新绘制线，否则绘制新线

我试图合并两个堆栈的职位一起得到一个线条绘制工具的工作，但我有问题。我想在此处合并此线条绘制示例：

（第一个响应中有一个JSFIDLE，单击“live version”）。在这篇文章中，圆圈的属性如下：

（检查第一个响应中的JSFIDLE）

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

以下是我尝试合并这两篇文章：

我假设问题出在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);
}

---

如您所见，当单击拖动线条时，会创建一条新线，并且在单击时也无法重新绘制。此外，拖动仅在直线的方向上进行。

您是否尝试过在每条直线的起点和终点添加标记，并添加鼠标事件以专门为这些元素重新绘制直线？否，我将尝试。当我说“重绘”时，我的意思是当前行可以在单击时进行修改。仍然有问题。您是否尝试过在每行的开始和结束处添加标记，并添加鼠标事件以专门为这些元素重绘该行？不，我会尝试。当我说“重画”时，我的意思是当前行可以在单击时进行修改。这仍然有问题。