d3.js – v3 and v4 – Enter and Update differences

by

This is the expected behaviour, and I’ve explained this before in this answer (not a duplicate, though).

What happened is that Mike Bostock, D3 creator, introduced a magic behaviour in D3 v2, which he kept in D3 v3.x, but decided to abandon in D3 v4.x. To read more about that, have a look here: What Makes Software Good? This is what he says:

D3 2.0 introduced a change: appending to the enter selection would now copy entering elements into the update selection […] D3 4.0 removes the magic of enter.append. (In fact, D3 4.0 removes the distinction between enter and normal selections entirely: there is now only one class of selection.)

Let’s see it.

Here is your code with D3 v3:

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);
<script src="https://d3js.org/d3.v3.min.js"></script>

Now the same code, with D3 v4. It will “break”:

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);
<script src="https://d3js.org/d3.v4.min.js"></script>

By “break” I mean the circles will be appended, but they will not receive the x and y properties in the “enter” selection, and they will default to zero. That’s why you see all circles at the top left corner.

Solution: merge the selections:

circles.enter().append('circle')
  .attr('r', 10)
  .merge(circles) //from now on, enter + update
  .attr('cx', function(d) {
    return d.x;
  })
  .attr('cy', function(d) {
    return d.y;
  });

According to the API, merge()…

… is commonly used to merge the enter and update selections after a data-join. After modifying the entering and updating elements separately, you can merge the two selections and perform operations on both without duplicate code.

Here is the code with merge():

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)
    .merge(circles) //from now on, enter + update
    .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);
<script src="https://d3js.org/d3.v4.min.js"></script>

More Related Contents:

  1. D3js take data from an array instead of a file
  2. D3 Bar Graph example not working locally
  3. D3 put arc labels in a Pie Chart if there is enough space
  4. How do I access the link to the content? [closed]
  5. javascript “if” statement returning false value when both values are equal
  6. How to create these webpages
  7. Convert SVG to PNG with applied images as background to svg elements
  8. HTML input type=file, get the image before submitting the form
  9. javascript onclick event over flash object
  10. How to ensure a form field is submitted when it is disabled?
  11. Disable dragging an image from an HTML page
  12. Use a new CSS file to override current website’s
  13. In Javascript, how do I “clear” the back (history -1)?
  14. Count textarea characters
  15. How can I change the font (family) for the labels in Chart.JS?
  16. jQuery – Redirect with post data
  17. IE8 alternative to window.scrollY?
  18. CSS: Change parent on focus of child
  19. Click on option event
  20. Attach event listener through javascript to radio button
  21. swfobject.embedSWF not working?
  22. How to do something before on submit?
  23. How to filter input type=”file” dialog by specific file type?
  24. How can I request an increase to the HTML5 localstorage size on iPad, like the FT web app does?
  25. How to trigger change when using the back button with history.pushstate and popstate?
  26. Javascript click event handler – how do I get the reference to the clicked item?
  27. Show/hide image with JavaScript
  28. Test if an element can contain text
  29. Using base64-encoded images with HtmlService in Apps Script
  30. Communicate between two pages / tabs

Leave a Comment