title: How to stop/pause a SPECIFIC force in d3?
body: <h2>Problem</h2>
  
  <p>I have a directed graph. It has 3 forces:</p>
  
  <ul>
  <li>Centering force</li>
  <li>Many-body force</li>
  <li>Link force</li>
  </ul>
  
  <p>I want to temporarily disable the <code>centering</code> force. I am not asking for how to disable the <em>whole</em> force layout, only one specific force.</p>
  
  <h2>What I tried</h2>
  
  <p>I have looked extensively through the documentation on <code>d3.forceSimulation</code> and <code>force</code> function but nowhere does it mention how to pause a force.
  I have tried to delete then reset the force by something like this:</p>
  
  <pre><code>this.simulation.force("center", null);
  </code></pre>
  
  <p>in <code>dragstart</code> then </p>
  
  <pre><code>this.simulation.force("center", oldCenterForce)
  </code></pre>
  
  <p>in <code>dragend</code>. The problem is that when drag ends, the nodes instantly jump back to the center, there is no smooth transition.</p>
  
  <p>I have also tried giving a custom <code>force</code> function that checks if <code>this.isDragging</code>. If it is dragging, then I return a dumb function <code>(alpha) =&gt; {}</code>, if not then I return <code>d3.forceCenter(...)</code> but it complains about a missing <code>node</code> array. I tried doing <code>.bind(this.simulation)</code> before calling the function, but still doesn't work.</p>
  
  <h2>Code</h2>
  
  <p>The part where I create the force simulation and store it in <code>this.simulation</code></p>
  
  <pre><code>  createForceSimulation = (nodeData: G.Node[], edgeData: G.Link[]) =&gt; {
       d3.forceSimulation(nodeData)
        .force("link", d3.forceLink(edgeData).id((d: any) =&gt; d.id))
        .force("charge", d3.forceManyBody())
        .force("center", d3.forceCenter(this.props.width / 2, this.props.height / 2))
        .force("collide", d3.forceCollide(this.circleSize * 2))
        .velocityDecay(this.simulationVelocityDecay)
    }
  </code></pre>
  
  <p>The part where I handle dragging a node:</p>
  
  <pre><code>  drag = simulation =&gt; {
      const dragStarted = d =&gt; {
        if (!d3.event.active) {
          simulation.alphaTarget(0.7).restart()
        }
        d.fx = d.x
        d.fy = d.y
      }
  
      const dragged = d =&gt; {
        d.fx = d3.event.x
        d.fy = d3.event.y
      }
  
      const dragEnded = d =&gt; {
        if (!d3.event.active) simulation.alphaTarget(0)
        d.fx = null
        d.fy = null
      }
  
      return d3
        .drag()
        .on("start", dragStarted)
        .on("drag", dragged)
        .on("end", dragEnded)
    }
  </code></pre>
  
  <h1>Summary</h1>
  
  <p>Expected: force to stop momentarily<br>
  Actual: force doesn't stop or crashes.</p>