title: How to stop a d3 force graph layout simulation?
body: <p>Once you  d3.layout.force()....start() a force layout simulation in D3, it keeps on going with also an active event. </p>
  
  <p>I want to set a timeout of 5 seconds to let the graph force layout simulation take shape and stop ( calling .stop() or alpha(0). This works to stop, but as soon as I drag a node the simulation starts again. </p>
  
  <p>The following code, also on easily testable from <a href="http://jsfiddle.net/guidoextras/trzfw/" rel="nofollow noreferrer">jsfiddle</a>, shows at the <strong>last line</strong> that the <strong>stop()</strong> will be issued and the simulation immediately stops, but as soon as you <strong>drag</strong> any node, the simulation starts again. I think this is hardcoded in the force-drag. Is there a way to disable/unregister this ?</p>
  
  <pre><code>var svgContainer = d3.select("#svgContainer");
  
  var element0a = svgContainer.append("g").attr("class","node").attr("transform","translate(100,100)");
  var element0b = element0a.append("rect").attr("x",0).attr("y",0).attr("width",20).attr("height",10).attr("fill","red");
  
  var element1a = svgContainer.append("g").attr("class","node").attr("transform","translate(100,200)");
  var element1b = element1a.append("rect").attr("x",0).attr("y",0).attr("width",20).attr("height",10).attr("fill","green");
  
  var element2a = svgContainer.append("g").attr("class","node").attr("transform","translate(100,300)");
  var element2b = element2a.append("rect").attr("x",0).attr("y",0).attr("width",20).attr("height",10).attr("fill","blue");
  
  var nodeArray = new Array();
  nodeArray[0] = { id : "000", label : "label 000", ui : element0a };
  nodeArray[1] = { id : "001", label : "label 001", ui : element1a };
  nodeArray[2] = { id : "002", label : "label 002", ui : element2a };
  
  var linkArray = new Array();
  
  var force = self.force = d3.layout.force()
      .nodes(nodeArray)
      .links(linkArray)
      .gravity(.05)
      .distance(80)
      .charge(-100)
      .size([600, 600])
      .start();
  
  var node = svgContainer.selectAll("g.node")
      .data(nodeArray)
      .call(force.drag);
  
  
  force.on("tick", function() {
        node.attr("transform", function(d) {return "translate(" + d.x + "," + d.y + ")";});
      });
  
  // HERE !!!! Without the stop() the simulation goes fine. With the stop() the simulation will immediately stop, but will continue as soon as you drap something. I want the simulation to never start again. 
  
  force.stop();
  </code></pre>
  
  <p>This is a screenshot of the example:</p>
  
  <p><img src="https://i.stack.imgur.com/UKIph.gif" alt="enter image description here"></p>