D3 Examples - d3v4 force add new nodes

xxxxxxxxxx
 
<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <script src="https://d3js.org/d3.v4.min.js"></script>
  <style>
    .option {font-size: 30px;}  
  </style>  
</head>  
​
<body>
  <center>
    <input name="updateButton" 
           type="button" 
           value="Add Node" 
           onclick="clickButton()" 
           class="option"/>
    </center>
  
  <script>
    // chart stuff
        const width = 1000
    const height = 600
    const svg = d3.select("body").append("svg")
      .attr("width", width)
      .attr("height", height)
    
​
    // initital data
    let sampleData = d3.range(2).map((d,i) => ({r: 40 - i * 0.5}));
    
    
    function changeNetwork() {
      d3.selectAll('.force1')
        .attr('cx', d => d.x)
        .attr('cy', d => d.y)
    };
​
      
    function force1(data) {
      const manyBody = d3.forceManyBody().strength(2)
      const center = d3.forceCenter().x((width/2)).y((height/2))
​
      // define force
      let force = d3.forceSimulation()
        .force('charge', manyBody)
        .force('center', center)
        .force('collision', d3.forceCollide(d => d.r + 2))
        .velocityDecay(.48);
      
      force
        .nodes(data) 
        .on('tick', changeNetwork);
​
      svg.selectAll('circle')
        .data(data)
        .enter()
        .append('circle')
        .attr('class', 'force1')
        .style('fill', 'coral')
        .attr('r', d => d.r)
      
      return force
    }
      
  
    function clickButton() {
      // generate random data point
      let ranNum = Math.round(Math.random() * 20);
      let newDataPoint = {r: 40 - ranNum * 0.5}
      
      // update datasource
      sampleData = sampleData.concat(newDataPoint);
      
      
      let nodes = svg.selectAll('circle.force1')
        .data(sampleData);
      
      let nodeEnter = nodes.enter()
        .append('circle')
        .attr('class', 'force1')
        .style('fill', 'blue')
        .attr('r', d => d.r / 2)
      
      nodes = nodeEnter.merge(nodes)
        .on('tick', changeNetwork)
      
      f1.nodes(sampleData);
      f1.alpha(1).restart()
      
    }
    
    let f1 = force1(sampleData);
    
 
    
  </script>
</body>
​
    