javascript - D3力有向图：拖动时节点不停留在鼠标位置

Question

我从这里复制了一个力导向图示例：https ://bl.ocks.org/heybignick/3faf257bbbbc7743bb72310d03b86ee8 我删除了标签，修改了节点和链接并更改了样式。最重要的变化是，svg 的视图区域应该是完整的窗口。

但现在不知何故，当它们被拖动时，节点会跳来跳去。我不知道它来自哪里。我的 d3/JS 代码出了什么问题，它不再顺利，就像在力有向图的所有很好的例子中一样？最好的情况是节点保持在鼠标位置，但如果至少这种跳跃会停止，我会很高兴，因为它是糟糕的用户体验。

here is my code: https://jsfiddle.net/nczekbqh/7

除了需要修复节点的第一个坐标外，在任何地方都找不到答案。我不能这样做，因为我的结果工作至少需要 100 个节点。

我尝试了一些 .force() 和 .drag() ，但没有任何改变这种明显的抽搐。

标签： javascriptd3.jssvg

Answer 1

闪烁也发生在原始 Block 的片段中。该错误与如何将差异添加到翻译中有关。您可以注意到，如果您在原始片段中长时间拖动一个点。

我在这里创建了一个 5 个节点，0 个链接强制有向图：https ://observablehq.com/@adelriosantiago/no-flicker-point-dragging 。它使用完整的窗口高度和宽度，并且闪烁消失了。