force-directed | Efficient 3D force-directed graph demonstration | Genomics library

The return value of the algorithm:

Returns: true if layout was successful or false if a negative weight cycle was detected or the graph is disconnected.

When you print it, you'll see that it is false. So, your graph doesn't satisfy the requirements.

Raising the edge probability makes for connected graphs:

Live On Compiler Explorer

In your function random(), you don't change the underlying data, you only change how it is represented. Each circle holds a reference to an element in the nodes array, but you set cx and cy within random(), you don't update the underlying data d.x and d.y. And even then, the values the circle has for cx and cy are not reactive. That is, they are not re-evaluated when d.x or d.y changes.

So I would split your code. Have a function random() that is called every 800ms and shuffles the nodes around a bit by changing d.x and d.y. And then the simulation is in charge of actually drawing the circles and the links - the way it already seems to be doing.

Here's a complete example.

The key challenge is that you have two sources of positioning working at the same time to move the nodes: a mouse move function that sets positions to achieve a fisheye effect and a tick function that sets positions to reflect an udpated force layout. Since the tick function is triggered constantly, this likely explains your comment that the fisheye effect only works when the force cools down: the tick function is no longer called and there is no conflict between the two positioning methods.

To remove competing positioning methods it is probably best to use the tick function during the force cool down, and after the force has cooled down, to use the mouse event itself to position: as the mouse won't always be moving during the simulation, and the ticks certainly won't be firing after.

Another challenge is that if the mouse stops moving the fisheye effect doesn't update despite motion of the force layout: we need to update the fisheye effect every tick to reflect what nodes are affected as the nodes drift in and out of the focus area. This update needs to occur regardless of whether the mouse moves or not.

As noted, using a force to create a fisheye is not great: the cursor forces the nodes to change x/y properties instead of merely distorting their appearance: the fisheye effect should not interfere with the force layout's forces/positional data.

Given these restrictions, a quick solution that perhaps could be cleaned up into something more elegant with time would be to:

• Track last mouse move position or if mouse has exited the SVG:

You can use :

If you don't mind installing altair, you can do this:

Change $ sign into @ like in docs.

Observablehq loads the standard library, which provides the invalidation method. According to the documentation, invalidation is...

A promise that resolves when the current cell is re-evaluated: when the cell’s code changes, when it is run using Shift-Enter, or when a referenced input changes.

This notebook explains it in details: https://observablehq.com/@observablehq/invalidation

D3-force replaces the source and target properties in your links from some identifier for a given node to the node's object reference itself. Consequently, all links consist of source and target object references, the node object references themselves.

Using JSON.parse and JSON.stringify to store/re-create the data doesn't result in an object where links and nodes share object references: node and link contain object references to different objects (even if they look identical):

Below sees if a link source is the same as a node, which it is after the force is initialized, but isn't after parsed and stringified.