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

这是我的示例，我希望从中获得一些想法 - 边缘上的圆点，在 mousemove 上重绘形状的可移动对象。

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