score:10

Accepted answer

there has been a conceptual change of the enter and update selections from v3 to v4. whereas in v3 the enter selection was automatically merged into the update selection you have to explicitely call selection.merge() from v4 upwards to get the same result.

the documentation for selection.enter() of v3 tells us:

the enter selection merges into the update selection when you append or insert.

the documentation of the same method of v4, on the other hand, reads:

the enter selection is typically only used transiently to append elements, and is often merged with the update selection after appending, such that modifications can be applied to both entering and updating elements.

have a look at this simplified example using v3, which should come with no surprises:

var update = d3.select("svg").selectall("circle")
  .data([1]);
  
var enter = update.enter()
  .append("circle")
    .attr("cx", "50")
    .attr("cy", "50")
    .attr("r", "20")
    .attr("fill", "red");
    
 update
   .transition().duration(2000)
     .attr("fill", "blue");
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>
<svg></svg>

doing the same with v4 requires a little modification, though:

var update = d3.select("svg").selectall("circle")
  .data([1]);
  
var enter = update.enter()
  .append("circle")
    .attr("cx", "50")
    .attr("cy", "50")
    .attr("r", "20")
    .attr("fill", "red");
    
 update
   .merge(enter)  // this merges both the enter and the update selection
   .transition().duration(2000)
     .attr("fill", "blue");
<script src="https://d3js.org/d3.v4.min.js"></script>

<svg></svg>

commenting out the .merge() line shows the effect you described, because the update selection will be empty, even though you entered new elements using the enter selection before.


More Query from same tag