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

Question

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

http://jsfiddle.net/Cbk9J/6/

function editShape(){

    console.log("edit shape", points1);

       var svg = d3.select("#g-1");

      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 d[0]; })
          .attr("cy", function(d) { return d[1]; });

      circle.exit().remove();

}

$('.edit').click(function(e) {
    e.preventDefault();
    editShape();
});

这是我的例子，我希望从中获取一些想法 - 边缘上的圆点，在鼠标移动时重绘形状的可移动物体。

http://jsfiddle.net/4xXQT/156/

---

我已将编辑代码添加到此示例中 - 但有2个问题。 1.似乎还有一个圆点。 2. svg形状附加了一个新的svg而不是编辑现有的svg - 我试过将其切换但是它会中断http://jsfiddle.net/Cbk9J/31/

如果我尝试切换到现有的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);

Answer 1

我已经在形状编辑器中添加了一个切换按钮 - 但仍然有错误 - 我不是真的想创建新的圆点 - 而且它似乎仍然有太多的圆点/不完整的路径 - 任何建议

****最新代码********** http://jsfiddle.net/Cbk9J/70/

这是重绘功能

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