title: d3.js - v3 and v4 - Enter and Update differences
body: <p>I'm trying to get the values for <code>x</code> and <code>y</code> to make a circles using d3.js v4. With the following code I manage to create the chart like behavior of the circles, but when I try to run the same code in v4 it doesn't work anymore. I know that there are some differences in the update to v4 but I didn't find any information about it. So i was wondering if someone can help me to run this code in d3.js v4.</p>
  
  <p>Here is the code using v3 (it will break using v4):</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>var svg = d3.select('body').append('svg')
    .attr('width', 250)
    .attr('height', 250);
  
  //render the data
  function render(data) {
    //Bind 
    var circles = svg.selectAll('circle').data(data);
  
    //Enter
    circles.enter().append('circle')
      .attr('r', 10);
    //Update
    circles
      .attr('cx', function(d) {
        return d.x;
      })
      .attr('cy', function(d) {
        return d.y;
      });
  
  
    //Exit
    circles.exit().remove();
  }
  
  
  
  var myObjects = [{
    x: 100,
    y: 100
  }, {
    x: 130,
    y: 120
  }, {
    x: 80,
    y: 180
  }, {
    x: 180,
    y: 80
  }, {
    x: 180,
    y: 40
  }];
  
  
  render(myObjects);</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src='https://d3js.org/d3.v3.min.js'&gt;&lt;/script&gt;</code></pre>
  </div>
  </div>
  </p>