score:3

Accepted answer

The changelog for v4 has the answer:

In addition, selection.append no longer merges entering nodes into the update selection; use selection.merge to combine enter and update after a data join.

Therefore, your update selection will be empty and the calls to .attr() will never be executed resulting in the missing attribute values.

For your code to work, you just need to merge the previously entered circles into the update selection:

function render(data) {
  //bind
  var cirs = svg.selectAll('circle').data(data);

  //enter
  var enter = cirs.enter().append('circle').attr('r', 2);

  //update (including merged enter selection)
  var update = cirs.merge(enter); // Merge the enter selection into the update selection
  update.attr('cx', function(d) {
      return d.x
    })
    .attr('cy', function(d) {
      return d.y
    });

  //exit
  cirs.exit().remove();
}

var svg = d3.select('body').append('svg')
  .attr('width', 250)
  .attr('height', 250);

function render(data) {
  //bind
  var cirs = svg.selectAll('circle').data(data);

  //enter
  var enter = cirs.enter().append('circle').attr('r', 2);

  //update (including merged enter selection)
  var update = cirs.merge(enter); // Merge the enter selection into the update selection
  update.attr('cx', function(d) {
      return d.x
    })
    .attr('cy', function(d) {
      return d.y
    });

  //exit
  cirs.exit().remove();
}

var objects = [{
  x: 100,
  y: 100
}, {
  x: 70,
  y: 90
}, {
  x: 181,
  y: 105
}, {
  x: 80,
  y: 60
}, {
  x: 160,
  y: 120
}, {
  x: 168,
  y: 182
}, {
  x: 95,
  y: 110
}];

render(objects);
<script src="https://d3js.org/d3.v4.js"></script>


Related Query