我正在迁移这个项目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; });
最佳答案
在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 进行测试
关于javascript - 迁移到 d3 v4 导致拖动时出现重复,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/45801254/