title: migrating to d3 v4 cause duplicates on drag
body: <p>I am migrating this project <a href="https://bl.ocks.org/cjrd/6863459" rel="nofollow noreferrer">https://bl.ocks.org/cjrd/6863459</a> to d3 v4  <a href="https://github.com/d3/d3/blob/master/CHANGES.md#dragging-d3-drag" rel="nofollow noreferrer">https://github.com/d3/d3/blob/master/CHANGES.md#dragging-d3-drag</a></p>
  
  <p><strong>JSFIDDLE</strong> <a href="https://jsfiddle.net/9wwqgwhh/1/" rel="nofollow noreferrer">https://jsfiddle.net/9wwqgwhh/1/</a></p>
  
  <p>Canvas is rendering, but there is some kind of problem with dragging. 
  I have to change this code.  </p>
  
  <pre><code>  GraphCreator.prototype.dragmove = function(d) {
      var thisGraph = this;
      if (thisGraph.state.shiftNodeDrag){
        thisGraph.dragLine.attr('d', 'M' + d.x + ',' + d.y + 'L' + d3.mouse(thisGraph.svgG.node())[0] + ',' + d3.mouse(this.svgG.node())[1]);
      } else{
        d.x += d3.event.dx;
        d.y +=  d3.event.dy;
        thisGraph.updateGraph();
      }
  </code></pre>
  
  <p>};
  Somehow thisGraph.updateGraph(); causing infinite node ceation on dragging, but it's all that I could find out.</p>
  
  <p>This is a updateGraph function</p>
  
  <blockquote>
    <p>// call to propagate changes to graph<br>
    GraphCreator.prototype.updateGraph = function(){</p>
  
  <pre><code>var thisGraph = this,
      consts = thisGraph.consts,
      state = thisGraph.state;
  
  thisGraph.paths = thisGraph.paths.data(thisGraph.edges, function(d){
    return String(d.source.id) + "+" + String(d.target.id);
  });
  var paths = thisGraph.paths;
  // update existing paths
  paths.style('marker-end', 'url(#end-arrow)')
    .classed(consts.selectedClass, function(d){
      return d === state.selectedEdge;
    })
    .attr("d", function(d){
      return "M" + d.source.x + "," + d.source.y + "L" + d.target.x + "," + d.target.y;
    });
  
  // add new paths
  paths.enter()
    .append("path")
    .style('marker-end','url(#end-arrow)')
    .classed("link", true)
    .attr("d", function(d){
      return "M" + d.source.x + "," + d.source.y + "L" + d.target.x + "," + d.target.y;
    })
    .on("mousedown", function(d){
      thisGraph.pathMouseDown.call(thisGraph, d3.select(this), d);
      }
    )
    .on("mouseup", function(d){
      state.mouseDownLink = null;
    });
  </code></pre>
  </blockquote>