D3.js D3力碰撞效果在拖动时偏移

请在此处查看该行为的视频剪辑：

通过X和Y力将每个块推入其位置，并在拖动时使用碰撞力将它们推开

奇怪的行为是，碰撞从拖动开始位置偏移。距离拖动起始位置越远，偏移越大

变量大小=40； 可变项目=[{ cx:50， 赛：200， 尺寸：尺寸， 对撞机：尺寸*0.5 }, { cx:100， 赛：200， 尺寸：尺寸， 对撞机：尺寸*0.5 }, { cx:600， 赛：200， 尺寸：尺寸， 对撞机：尺寸*0.5 }, { cx:750， 赛：200， 尺寸：尺寸， 对撞机：尺寸*0.5 } ]; var alphaTarget=0.03； var-sim； 变量节点= d3.select.grid-svg .选择全部正确 .数据项 进来 .appendrect .attrclass，网格项块 .attr'x'，d=>d.cx .attr'y'，d=>d.cy .attrwidth，d=>d.size .attrheight，d=>d.size .attrtransform，d=>`translate-${d.size/2}，-${d.size/2}` 呼叫 d3 拖曳 .onstart，事件，d=>{ 如果！event.active sim.alphatargetalphataget.restart； d、 fx=d.x； d、 fy=d.y； 模拟力 碰撞 d3.forceCollide.radiudc=>dc.collideR ; } .ondrag，事件，d=>{ d、 fx=事件x； d、 fy=事件y； } .onend，事件，d=>{ if！event.active sim.alphatargetalphataget； d、 fx=null； d、 fy=null； sim.forcecollide，空； } ; sim=d3 .力模拟 .alphaDecay0.2 .alphaMin0.005 武力 x,， d3 forceX医生 .强度3.0 .xd=>d.cx 武力 Y d3 福西先生 .强度3.0 .yd=>d.cy ; sim.NodeItems.ontick，=>{ nodes.attrx，d=>d.x.attry，d=>d.y； }; .网格项目块{ 填充：009900； }

---

我已经找到了潜在的原因：你离点d.cx，d.cy越远，它就越会拉住街区，让它回来。对区块的巨大拉力使d3认为没有理由移动与其碰撞的区块。毕竟，勾选一次后，您正在拖动的块将不再重叠，因为它被向后拉得太用力了

我通过重新初始化定心力来解决这个问题，并且只有当它不是当前拖动的块时，才给它们任何强度。否则，强度为0，且不会有效施加力

变量大小=20； var宽度=400； var高度=200； 可变项目=[{ cx:2*尺寸， cy：高度/2， 尺寸：尺寸， 对撞机：大小 }, { cx：宽度-2*尺寸， cy：高度/2， 尺寸：尺寸， 对撞机：大小 } ]; var alphaTarget=0.03； var sim=d3 .力模拟 .alphaDecay0.2 .alphaMin0.005； 变量节点= d3.select.grid-svg .选择全部正确 .数据项 进来 .appendrect .attrclass，网格项块 .attr'x'，d=>d.cx .attr'y'，d=>d.cy .attrwidth，d=>d.size .attrheight，d=>d.size //.attrtransform，d=>`translate-${d.size/2}，-${d.size/2}` 呼叫 d3 拖曳 .onstart，functionevent，d{ 如果！event.active sim.alphatargetalphataget.restart； d、 IsDraging=true； d、 fx=d.x； d、 fy=d.y； 模拟力 碰撞 d3.forceCollide.radiudc=>dc.collideR ; 设定力； } .ondrag，事件，d=>{ d、 fx=事件x； d、 fy=事件y； } .onend，事件，d=>{ if！event.active sim.alphatargetalphataget； d、 IsDraging=错误； d、 fx=null； d、 fy=null； sim.forcecollide，空； 设定力； } ; 函数设置力{ 模拟 武力 x,， d3 forceX医生 .StrengthHD=>d.IsDraging？0:3.0 .xd=>d.cx 武力 Y d3 福西先生 .StrengthHD=>d.IsDraging？0:3.0 .yd=>d.cy ; } 设定力； sim.NodeItems.ontick，=>{ nodes.attrx，d=>d.x.attry，d=>d.y； }; .网格项目块{ 填充：009900； }

---

此外，可能是由于拖得更长而不是拖得更远，导致延迟？由于模拟接近模拟退火，因此施加的力可能会随着时间的推移而减小