title: D3 join() only renders 'update' while doesn't show 'enter' elements
body: <p>I tried to update an array of circles from the static positions
  to dynamic force layout positions.</p>
  <p>I tried to apply different colors for the circles within 'update' range
  and apply another color to the new circles added from the new data.</p>
  <p>however, newly added data nodes are not rendered for some reason.</p>
  <p>Can anyone help me?</p>
  <p>My update pattern is as below.
  <br></p>
  <p>1.Initial Data Binding</p>
  <pre><code>let svg = d3.select('.graph')
              .attr('width',width)
              .attr('height',height)
  
  
  svg.selectAll('circles').data(randoms)
     .join('circle')
     .attr('cx',d=&gt;Math.random()*600)
     .attr('cy',d=&gt;Math.random()*600)
     .attr('r',5)
  </code></pre>
  <p>2.Update Data binding</p>
  <pre><code>let simulation = d3.forceSimulation(randoms2)
                     .force('x', d3.forceX().x(function(d,i) {
                       if(i%2==0){
                         return 10;
                       }
                       else{
                         return 20
                       }
                     }))
                     .force('collision', d3.forceCollide().radius(function(d) {
                             return 1
                      }))
                     .on('tick',ticked)
  
  
  function ticked(){
                      d3.selectAll('circle')
                      .data(randoms2)
                      .join(          enter =&gt;enter.append('circle')
                                            .attr(&quot;fill&quot;, &quot;green&quot;)
                                            .attr('cx', function(d) {return d.x})
                                            .attr('cy', function(d) {return d.y})
                                            .attr('r',5),
                        
                                  update =&gt; update
                                      .attr(&quot;fill&quot;, &quot;red&quot;),
                        
                                  exit =&gt; exit.remove()
                                  ) 
                                      .transition().duration(100)
                                      .attr('cx', function(d) {return d.x})
                                      .attr('cy', function(d) {return d.y})
  
    }
  </code></pre>
  <p>It only shows the updated circles.</p>
  <p>the complete code is in the following link.</p>
  <p><a href="https://codepen.io/jotnajoa/pen/xxEYaYV?editors=0001" rel="nofollow noreferrer">https://codepen.io/jotnajoa/pen/xxEYaYV?editors=0001</a></p>