title: d3.js Edit existing shape path
body: <p><img src="https://i.stack.imgur.com/ZNTOs.jpg" alt="enter image description here"></p>
  
  <p>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. </p>
  
  <p><a href="http://jsfiddle.net/Cbk9J/6/" rel="nofollow noreferrer">http://jsfiddle.net/Cbk9J/6/</a></p>
  
  <pre><code>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();
  });
  </code></pre>
  
  <p>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.</p>
  
  <p><a href="http://jsfiddle.net/4xXQT/156/" rel="nofollow noreferrer">http://jsfiddle.net/4xXQT/156/</a></p>
  
  <hr>
  
  <p><img src="https://i.stack.imgur.com/ZNTOs.jpg" alt="enter image description here"></p>
  
  <p>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 <a href="http://jsfiddle.net/Cbk9J/31/" rel="nofollow noreferrer">http://jsfiddle.net/Cbk9J/31/</a> </p>
  
  <p>It complains about length if I try and switch over to the existing svg.</p>
  
  <pre><code>/*
      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);
  </code></pre>