d3.js - 力模拟拖动不随鼠标移动

Question

This example simulation looks good but drag doesn't work!

 test() function test() { var data1 ={ "nodes": [ {"id": "A"}, {"id": "B"}, {"id": "C"}, {"id":"D"}], "links": [ {"source": "A", "target": "B"}, {"source": "B", "target": "C"}, {"source": "C", "target": "A"}, {"source": "D", "target": "A"}]} var height = 250; var width = 400; var svg = d3.select("body").append("svg").attr("width",width).attr("height",height).style('border','1px solid red') var simulation1 = d3.forceSimulation().force("link", d3.forceLink().id(function(d) { return d.id; }).distance(50)).force("charge", d3.forceManyBody()).force("center", d3.forceCenter(width / 3, height / 2)); var link1 = svg.append("g").selectAll("line").data(data1.links).enter().append("line").attr("stroke","black"); var node1 = svg.append("g").selectAll("circle").data(data1.nodes).enter().append("circle").attr("r", 10).call(d3.drag().on("drag", dragged1).on("end", dragended1)).attr("fill","crimson"); simulation1.nodes(data1.nodes).on("tick", ticked1).alphaDecay(0).force("link").links(data1.links); function ticked1() { link1.attr("x1", function(d) { return d.source.x; }).attr("y1", function(d) { return d.source.y; }).attr("x2", function(d) { return d.target.x; }).attr("y2", function(d) { return d.target.y; }); node1.attr("cx", function(d) { return dx; }).attr("cy", function(d) { return dy; }); } function dragged1(d,event) { d.fx = event.x; d.fy = event.y; } function dragended1(d) { d.fx = null; d.fy = null; } }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/6.7.0/d3.min.js"></script>

Answer 1

dragged1 and dragended1 should have event as the first argument.

 test() function test() { var data1 ={ "nodes": [ {"id": "A"}, {"id": "B"}, {"id": "C"}, {"id":"D"}], "links": [ {"source": "A", "target": "B"}, {"source": "B", "target": "C"}, {"source": "C", "target": "A"}, {"source": "D", "target": "A"}]} var height = 250; var width = 400; var svg = d3.select("body").append("svg").attr("width",width).attr("height",height).style('border','1px solid red') var simulation1 = d3.forceSimulation().force("link", d3.forceLink().id(function(d) { return d.id; }).distance(50)).force("charge", d3.forceManyBody()).force("center", d3.forceCenter(width / 3, height / 2)); var link1 = svg.append("g").selectAll("line").data(data1.links).enter().append("line").attr("stroke","black"); var node1 = svg.append("g").selectAll("circle").data(data1.nodes).enter().append("circle").attr("r", 10).call(d3.drag().on("drag", dragged1).on("end", dragended1)).attr("fill","crimson"); simulation1.nodes(data1.nodes).on("tick", ticked1).alphaDecay(0).force("link").links(data1.links); function ticked1() { link1.attr("x1", function(d) { return d.source.x; }).attr("y1", function(d) { return d.source.y; }).attr("x2", function(d) { return d.target.x; }).attr("y2", function(d) { return d.target.y; }); node1.attr("cx", function(d) { return dx; }).attr("cy", function(d) { return dy; }); } function dragged1(event,d) { d.fx = event.x; d.fy = event.y; } function dragended1(event, d) { d.fx = null; d.fy = null; } }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/6.7.0/d3.min.js"></script>