migrating to d3 v4 cause duplicates on drag

Question

I am migrating this project https://bl.ocks.org/cjrd/6863459 to d3 v4 https://github.com/d3/d3/blob/master/CHANGES.md#dragging-d3-drag

JSFIDDLE https://jsfiddle.net/9wwqgwhh/1/

Canvas is rendering, but there is some kind of problem with dragging. I have to change this 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();
    }

}; Somehow thisGraph.updateGraph(); causing infinite node ceation on dragging, but it's all that I could find out.

This is a updateGraph function

// call to propagate changes to graph
GraphCreator.prototype.updateGraph = function(){

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

Answer 1

In updateGraph() replace the lines

newGs.append("circle")
  .attr("r", String(consts.nodeRadius));

newGs.each(function(d){
  thisGraph.insertTitleLinebreaks(d3.select(this), d.title);
});

with these

newGs.each(function(d) {
  if (this.childNodes.length === 0) {
    d3.select(this)
      .append("circle")
      .attr("r", String(consts.nodeRadius));
    thisGraph.insertTitleLinebreaks(d3.select(this), d.title);
  }
});

Tested with d3 up to version 5.7