javascript - 迁移到 d3 v4 导致拖动时出现重复

Question

我正在迁移这个项目https://bl.ocks.org/cjrd/6863459到 d3 v4 https://github.com/d3/d3/blob/master/CHANGES.md#dragging-d3-drag

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

Canvas 正在渲染，但拖动时出现某种问题。我必须更改此代码。

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

}；不知何故 thisGraph.updateGraph();拖动时会导致无限节点连接，但这就是我能找到的全部内容。

这是一个 updateGraph 函数

// 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

在updateGraph()中替换行

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

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

有了这些

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

使用 d3 至版本 5.7 进行测试