Javascript d3.js编辑现有形状路径

我正在尝试开发一个搜索工具-用户将绘制一条路径，该区域中存在的节点将出现。在应用程序的这一部分中，我想编辑现有路径

这是我的例子，我想从中吸取一些想法-边上的圆点，在mousemove上重新绘制形状的可移动对象

---

我已经在这个例子中添加了编辑代码，但是有两个问题。1.似乎还有一个圆点。2.svg形状添加了一个新的svg，而不是编辑现有的svg——我尝试过将其切换，但它断了

如果我尝试切换到现有的svg，它会抱怨长度

/*
    var svg = d3.select("#g-1")
        .attr("width", width)
        .attr("height", height)
        .attr("tabindex", 1);
*/

    var svg = d3.select("body").append("svg")
        .attr("width", width)
        .attr("height", height)
        .attr("tabindex", 1);

我在形状编辑器中添加了一个切换-但仍然有问题-我真的不想创建新的圆点-而且它似乎仍然有太多的圆点/不完整的路径-有什么建议吗

****最新代码**********

这里是重画函数

   function redraw() {
        svg.select("path").attr("d", line);

        var circle = svg.selectAll("circle")
        .data(points, function(d) { return d; });

        circle.enter().append("circle")
        .attr("r", 1e-6)
        .on("mousedown", function(d) { selected = dragged = d; redraw(); })
        .transition()
        .duration(750)
        .ease("elastic")
        .attr("r", 6.5);

        circle
        .classed("selected", function(d) { return d === selected; })
        .attr("cx", function(d) {
            return parseInt(d[0], 10); 
        })
        .attr("cy", function(d) { 
            return parseInt(d[1], 10); 
        });

        circle.exit().remove();

        if (d3.event) {
            d3.event.preventDefault();
            d3.event.stopPropagation();
        }
    }

---

让圆圈跳动到位-但有一个备用圆圈到位-不太复杂的例子-谢谢你的投票-这里的任何人都可以帮助消除错误。为什么我最终会得到比需要更多的圆点。我如何阻止它创建更多的圆-或修复此断开的路径问题，然后将其添加到完整的绘图、编辑、清除形状路径-

   function redraw() {
        svg.select("path").attr("d", line);

        var circle = svg.selectAll("circle")
        .data(points, function(d) { return d; });

        circle.enter().append("circle")
        .attr("r", 1e-6)
        .on("mousedown", function(d) { selected = dragged = d; redraw(); })
        .transition()
        .duration(750)
        .ease("elastic")
        .attr("r", 6.5);

        circle
        .classed("selected", function(d) { return d === selected; })
        .attr("cx", function(d) {
            return parseInt(d[0], 10); 
        })
        .attr("cy", function(d) { 
            return parseInt(d[1], 10); 
        });

        circle.exit().remove();

        if (d3.event) {
            d3.event.preventDefault();
            d3.event.stopPropagation();
        }
    }