title: How to entirely remove a d3 forceSimulation and its drag handers
body: <p>I want to allow users to view their network using either a <a href="https://beta.observablehq.com/@mbostock/d3-force-directed-graph" rel="nofollow noreferrer">d3 forceSimulation</a> or a <a href="https://beta.observablehq.com/@mbostock/hello-cola" rel="nofollow noreferrer">CoLa layout</a>, which means when a user fires an event, I need to change out which of those layout algorithms is updating the <code>x</code> and <code>y</code> attributes of my nodes and edges.</p>
  <p>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 &quot;active&quot; -- as well as removing the drag handlers associated with them.</p>
  <p>My render function currently has:</p>
  <pre><code>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(&quot;link&quot;, d3.forceLink(links))
      .force(&quot;charge&quot;, d3.forceManyBody().strength(-repulsion_strength))
      .force(&quot;center&quot;, d3.forceCenter(w / 2, h / 2));
  
    node.call(d3.drag()
      .on(&quot;start&quot;, dragstarted)
      .on(&quot;drag&quot;, dragged)
      .on(&quot;end&quot;, dragended));  // where those are the conventional functions
  
    d3_force.on('tick', ticked);
  }
  </code></pre>
  <p>One solution might be to mangle these objects, e.g. <code>delete d3_force['something_important']</code></p>
  <p>Something simpler might work, like <code>d3_force.nodes([])</code> or somesuch.</p>
  <p>I'm not sure how I would do something similar to the drag handlers because I'm less familiar with how those work.</p>
  <h3>Update 1:</h3>
  <p>A partial solution suggested for the d3 drag handler (in d3v3) <a href="https://stackoverflow.com/questions/13136355/d3-js-remove-force-drag-from-a-selection">here</a>:</p>
  <pre><code>var dragCallback = d3.select('rect#no-drag').property('__onmousedown.drag')['_'];
  
  d3.select('rect#no-drag').on('mousedown.drag', null);
  </code></pre>
  <p>and then restoring it later:</p>
  <pre><code>d3.selectAll('rect#no-drag').on('mousedown.drag', dragCallback);
  </code></pre>