title: Real time updating in d3
body: <p>I would like to build a d3 layout which continually gathers new data and updates the visualization accordingly.  Here is a working prototype of what I have in mind (with randomly generated data):</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;body&gt;
  &lt;script src="d3/d3.min.js" charset="utf-8"&gt;&lt;/script&gt;
  &lt;script type="application/javascript"&gt;
  
  var width = window.innerWidth;
  var height = window.innerHeight;
  
  var svg = d3.select("body")
      .append("svg")
      .attr("width", width)
      .attr("height", height);
  
  var layout;
  iterateLayout(svg, 0);
  
  function iterateLayout(svg, counter) {
      if(counter % 3 == 0)
          layout = generateLayout(20);
      else if(counter % 3 == 1)
          layout = generateLayout(100);
      else
          layout = generateLayout(500);
  
      layout.force.start();
      console.log("Force computations begin");
  
      layout.force.on("end", function() {
          console.log("Force computations complete");
          displayLayout(svg, layout);
          console.log("Layout should be visible, starting next layout computation");
          iterateLayout(svg, counter + 1);
      });
  }
  
  function generateLayout(numNodes) {
      var nodes = [];
      var links = [];
  
      for(var i = 0; i &lt; numNodes; i++)
          nodes.push({"name": i});
  
      var index;
  
      for(var i = 0; i &lt; numNodes; i++)
          for(var j = 0; j &lt; 4; j++) {
              index = Math.floor((Math.random() * numNodes));
  
              if(i != index)
                  links.push({"source": i, "target": index});
          }
  
      var force = d3.layout.force()
          .size([width, height])
          .nodes(nodes)
          .links(links);
  
      return {"force": force, "nodes": nodes, "links": links};
  }
  
  function displayLayout(svg, layout) {
      svg.selectAll("*").remove();
  
      var links = svg.selectAll(".link")
          .data(layout.links)
          .enter()
          .append("line")
          .attr("class", "link")
          .style("stroke", "black");
  
      var nodes = svg.selectAll(".node")
          .data(layout.nodes)
          .enter()
          .append("circle")
          .attr("class", "node")
          .attr("r", 4)
          .style("fill", "black");
  
      links
          .attr("x1", function(d) { return d.source.x; })
          .attr("y1", function(d) { return d.source.y; })
          .attr("x2", function(d) { return d.target.x; })
          .attr("y2", function(d) { return d.target.y; });
  
      nodes
          .attr("cx", function(d) { return d.x; })
          .attr("cy", function(d) { return d.y; });
  }
  &lt;/script&gt;
  </code></pre>
  
  <p>This code behaves exactly the way I want, except for the fact that it depends on infinite recursive calls of the <code>iterateLayout</code> function.  Aside from the fact that this is a memory leak, this means that the code will eventually consume the browser's call stack and throw an error.</p>
  
  <p>So I'd like to replace the infinite recursion with an infinite loop.  The problem with simply enclosing the relevant code in a <code>while(true)</code> block is that the loop won't wait for the "end" event in <code>d3.layout.force()</code> to fire before continuing on to the next iteration of the loop.  Thus my questions are:</p>
  
  <ol>
  <li>Does Javascript provide syntax for "wait until a specific event is triggered before moving on to the next iteration in a loop"?</li>
  <li>Is there a more d3ish way to get what I want?</li>
  </ol>