I can’t for the life of me figure out what the difference is between @jrus/arrowheads and @jrus/bezier-segment which is causing the former one to only return positions relative to the mousedown location in d3.drag instead of returning positions relative to the SVG container’s coordinate system, the way the latter notebook’s plots do.
I thought I was copying code directly from one to the other.
I’ll give this another try tomorrow, but if someone more experienced can figure it out from a minute or two of inspection I would appreciate the help.
The difference is the coordinate system. The bezier-segment notebook is just using pixels, while the arrowheads notebook is using x and y linear scales. So, to fix the arrowheads notebook, you need to change your drag.subject definition like so:
Okay, I get it… .subject determines the starting coordinates based on the thing being clicked, rather than based on the position on screen per se, so that motions stay relative to the mouse movement instead of having the object jump. I implemented something similar a decade ago, but the D3 one is probably simpler and much better debugged.
I’ll have to spend some more time fiddling and thinking it through carefully. Getting all the edge cases in mouse interaction right is always the hardest part for me of any web UI project.
You can pass an accessor function to d3.forceX (x.x) and d3.forceY (y.y) if you want to change how the target position for the positioning forces is computed. But you can’t change the properties that the simulation itself uses to record the node’s position and velocity, as these are read-write properties, not accessors. Those are documented here: