title: How to smoothly update a D3 v4 force diagram with new data
body: <p>I'm looking for a way to introduce new nodes into a force directed directed graph that comes from brand new data (e.g. from a data stream).</p>
  
  <p>In mbostock's examples (either <a href="https://bl.ocks.org/mbostock/1095795" rel="nofollow noreferrer">this</a> or <a href="https://bl.ocks.org/mbostock/0adcc447925ffae87975a3a81628a196" rel="nofollow noreferrer">this</a>), the nodes are able to smoothly enter and exit because in the initial setup, every node is rendered.</p>
  
  <p>However, if a brand new data point is introduced, the graph renders from scratch again. Is there a way to get a brand new node to transition smoothly into the graph?</p>
  
  <p>See this <a href="https://codepen.io/lionbark/pen/XVaPgE" rel="nofollow noreferrer">codepen</a> (it's a direct adaption of the 2nd example) for what I mean; entering and exiting existing nodes is fine, but the transition for when a brand new node enters is jumpy.</p>
  
  <pre><code>  //smooth update
    nodes = [a, b];
    links = [l_ab];
    restart();
  
    //not as smooth
    var d = {id: id++};
    nodes = [a, b, c, d];
      links = [l_ab, l_bc, l_ca, {
        source: a,
        target: d
      }];
    restart();
  </code></pre>