d3.js Edit existing shape path

Question

I am trying to develop a search tool - where a user will draw a path and nodes that exist in that area will appear. In this part of the application I would like to edit the existing path.

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

This is my example that I wish to take some ideas from - circle points on the edges, movable objects that redraw the shape on mousemove.

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

---

I've added the edit code into this example - but there are 2 issues. 1. There appears to be an additional circle point. 2. The svg shape is appending a new svg as opposed to editing the existing svg - I've tried switching it over but it breaks http://jsfiddle.net/Cbk9J/31/

It complains about length if I try and switch over to the existing 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

I've added a toggle to the shape editor - but still buggy - I don't really want to create new circle points - and it still seems to have too many circle points/incomplete path - any suggestions

****LATEST CODE ********** http://jsfiddle.net/Cbk9J/70/

here is the redraw function

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