Inserting @ 0 causes issues with join-update

forked from aitee's block: Inserting @ 0 causes issues with join-update

<!DOCTYPE html>
<head>
  <meta charset="utf-8">
<script src="https://d3js.org/d3.v5.min.js"></script>
  <style>
    body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0; }
  </style>
</head>

<body>
  <script>
    
  var width = 900;
  var svg = d3.select("body").append("svg")
      .attr("width", width)
      .attr("height", 33)
      .attr("viewBox", `0 -20 ${width} 33`);

function update(data){
    svg.selectAll("text")
    .data(data, d=>d)
      .join(
        onCreate => onCreate.append("text") // enter
      // Can't solely put it here as text needs to be on update as well
      // (otherwise the values aren't updated and assumes the values in those positions are unchanged.)
      			//.text(d => d) 
            .attr("fill", "green"),
        onUpdate => onUpdate // update
            .attr("fill", "black"),
      	onRemove => onRemove.remove() // exit
      )
    // We can put things common to enter and update.
    .text(d => d)
    .attr("font-size", "24")
    .attr("font-weight", "bold")
    .attr("x", (d, i) => i * 50);
}
    
  update(["1", "2", "3"]);  // Expect, all green
  update(["-1", "0", "1", "2", "3"]);  // Expect 0, 1 green followed by 1, 2, 3 black.

</script>
</body>

https://d3js.org/d3.v5.min.js