Reputation: 13
I copied an force directed graph example from here: https://bl.ocks.org/heybignick/3faf257bbbbc7743bb72310d03b86ee8 I deleted the labels, modified nodes and links and changed the styles. the most important change is, that the view area of the svg should be the complete window.
but now somehow the nodes are jumping around ugly when they are dragged. I don't know where it comes from. what in my d3/JS-codes went wrong, that it's not going smooth anymore, like in all the great examples with the force directed graph? best case would be if the node stays with the mouse position, but I'll be very happy if at least this jumping would stop because it's bad UX.
here is my code: https://jsfiddle.net/nczekbqh/7
could'nt find an answer anywhere but the need to fix the first coordinates of the nodes. I can't do this, because my result work needs at least 100 nodes in it.
I tried a bit with .force() and .drag() but nothing changes this obvious twitching.
Upvotes: 1
Views: 437
Reputation: 8124
The flicker happens in the original Block's snippet as well. The bug is related to how the differential is added to the translation. You can note that if you drag a point for a long time in the original snippet.
I have created a 5 nodes, 0 links force directed graph here: https://observablehq.com/@adelriosantiago/no-flicker-point-dragging. It uses the full window height and width and the flickering is gone.
Upvotes: 1