How to entirely remove a d3 forceSimulation and its drag handers

Question

I want to allow users to view their network using either a d3 forceSimulation or a CoLa layout, which means when a user fires an event, I need to change out which of those layout algorithms is updating the x and y attributes of my nodes and edges.

In particular, this requires that I be able to stop the simulations and prevent them from updating those attributes on the data I give them while the other is "active" -- as well as removing the drag handlers associated with them.

My render function currently has:

if (use_cola) {

  // MUST TURN OFF D3 AND ITS DRAG HANDLERS!

  force = cola_force.nodes(graph.nodes)
    .links(links)
    .groups(groups[group_nodes_by])
    .jaccardLinkLengths(repulsion_strength, 0.7)
    .avoidOverlaps(true)
    .start(50, 0, 50);

  node.call(cola_force.drag);
  group.call(cola_force.drag);

  cola_force.on('tick', ticked);

} else {  // d3

  // MUST TURN OFF COLA AND ITS DRAG HANDLERS!

  force = d3_force.nodes(graph.nodes)
    .force("link", d3.forceLink(links))
    .force("charge", d3.forceManyBody().strength(-repulsion_strength))
    .force("center", d3.forceCenter(w / 2, h / 2));

  node.call(d3.drag()
    .on("start", dragstarted)
    .on("drag", dragged)
    .on("end", dragended));  // where those are the conventional functions

  d3_force.on('tick', ticked);
}

One solution might be to mangle these objects, e.g. delete d3_force['something_important']

Something simpler might work, like d3_force.nodes([]) or somesuch.

I'm not sure how I would do something similar to the drag handlers because I'm less familiar with how those work.

Update 1:

A partial solution suggested for the d3 drag handler (in d3v3) here:

var dragCallback = d3.select('rect#no-drag').property('__onmousedown.drag')['_'];

d3.select('rect#no-drag').on('mousedown.drag', null);

and then restoring it later:

d3.selectAll('rect#no-drag').on('mousedown.drag', dragCallback);

score 6 · Accepted Answer · answered Dec 07 '18 at 10:18

6

You need to do two things:

Stop the simulation if it is still running to prevent it from messing with your nodes coordinates. This can easily be done by calling d3_force.stop(). There is no need to first check if it is running, though, because calling it on an already halted simulation will not hurt either.

You can later re-activate the simulation by just calling d3_force.restart() probably pumping some energy back in to heat it up: d3_force.alpha(1).restart().
The docs tell us how to get rid of the drag behavior:
The listeners use the name .drag, so you can subsequently unbind the drag behavior as follows:
```
 selection.on(".drag", null);
```
In your case this would be node.on(".drag", null). If the user switches the layout back you can again bind the drag behavior to the node selection. For this it might be worth considering to create the drag behavior beforehand and just pass around the reference when rebinding later on.

answered Dec 07 '18 at 10:18

altocumulus

21,179
13
61
84

This is a great answer! But a partial one. I'm not sure I did a good enough job of specifying above, but I need to figure out how to alternate between these two libraries -- d3 and cola. Your answer shows how to turn off d3 drag handlers and layout so that I can switch to cola, but I still need to figure out how to turn off cola drag handlers and layout to switch to d3. Since cola is rarer and doesn't have great docs, I don't expect you to give me an answer -- but could you point me in the right direction? Where should I go looking for where CoLa binds its drag handlers (analogous to ".drag")? – Alex Lenail Dec 08 '18 at 16:16
@AlexLenail IMO, that‘s rather broad. I understood what you are looking for but, as the question is, I read it as if you were asking for D3 alone. I suggest you keep it to the point and put the Cola part into a new question while providing a link to the other post in both questions. As I am not into Cola myself I‘m afraid that’s the most I can do for you. – altocumulus Dec 08 '18 at 17:24
this looks promising, but does `d3_force.stop` exist in v6 and v7? I would assume not? – Alexander Mills Nov 18 '22 at 07:22
@AlexanderMills Why should it not exist? https://github.com/d3/d3-force#simulation_stop – altocumulus Nov 18 '22 at 12:09
I am not sure, but my answer seems clearer – Alexander Mills Nov 18 '22 at 20:33

Alexander Mills · Answer 2 · 2022-11-18T20:33:57.547

-1

There has to be a way to stop a simulation with a reference like so:

    let simulation = d3.forceSimulation(nodes);

    document.turnOffSim = () => {
        simulation.stop(); 
    };

yes that seems to work.

edited Nov 18 '22 at 20:33

answered Nov 18 '22 at 07:23

Alexander Mills

90,741
139
482
817

How to entirely remove a d3 forceSimulation and its drag handers

Update 1:

2 Answers2