Search code examples
javascriptsvgd3.js

How do I adapt an interactive d3 gravity simulation to operate on localStorage items?

I am trying to adapt a stackoverflow answer (that I cannot locate now!) that linked to this: https://codepen.io/keetraxx/pen/oNzXKVN - which I did save.

I wish to make the interactive cable drawing (.on("mouse* methods) a single subroutine that does the drawing. However, the cable mid-point is pulled to the right instead of simulating gravity. After a bit of head-scratching and debugging, I can see that in my desired subroutine, the 3 middle nodes are not assigned fx and fy values. But I'm not sure how to fix things. Help? :D

Here is my "not working properly" js and css code: https://gist.github.com/ology/a13a274a42f5926be504f56c71b1e2aa

And here is a screenshot of the js in action: enter image description here where the orange cable is one drawn interactively with the .on(mouse* methods, and the extruded blue one is drawn with my adapted subroutine.

I tried copy-pasting the innards of the .on("mouse* methods to a single subroutine and firing that in a loop of localStorage cables, but the gravity simulation is not right.

Solution

  • The problem turns out to be that I was not using integers for my node coordinates. The assignment of x0, y0, x1, and y1 in the draw_patch() function, should each be assigned after parseInt() has converted the respective split string parts. For example: const x0 = parseInt(xy[0]);