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

}; 不知怎的，这个Graph.updateGraph（）;在拖动时导致无限节点停止，但这是我能找到的所有内容。

这是updateGraph函数

//调用将更改传播到图形 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版之前进行了测试

迁移到d3 v4会导致拖动重复

1 个答案: