9. key-function-update-pattern

Built with blockbuilder.org

<!DOCTYPE html>
<meta charset="utf-8">
<script src="https://d3js.org/d3.v4.min.js"></script>

<style>

text {
  font: bold 48px monospace;
}

.enter {
  fill: green;
}

.update {
  fill: #333;
}

</style>

g = svg.append("g").attr("transform", "translate(32," + (height / 2) + ")");  
  
  
  
var alphabet = "abcdefghijklmnopqrstuvwxyz".split("");

function update(data) {

// ---- step 6: map/update new data to existing doms ---------------------
  
// 1. bind data with dom using index
//   Code:     var text = g.selectAll("text").data(data);
  
// 		1. split new data into update,enter,exit groups by index or length of array
// 		2. update = newData.slice(0, min([oldData.length-1, newData.length-1]))
// 		3. if oldData.length > newData.length, then enter = []
// 		4. if oldData.length < newData.length, then enter = newData.slice[oldData.length, newData.length-1]  
  
// 2. bind data with dom using key-function
//   Code:   var text = g.selectAll("text")
// 											    .data(data, function(d) { return d; });

//   1. update = intersect(newData, oldData), intersection datum keep their index from newData;
//   2. enter = elements in newData & out oldData, elements keep their index from newData
//   3. merge = enter + update = full newData, index as they are in newData
//   3. exit = elements in oldData & out newData, elements keep their index from oldData
  
  var text = g.selectAll("text")
    .data(data, function(d) { return d; });
// Joining by index is convenient if your data and elements are in the same order. However, when orders differ, joining by index is insufficient! In this case, you can specify a key function as the second argument to selection.data. The key function returns the key for a given datum or element.

// 3. add className attr to 
  text.attr("class", "update")
//       .attr("dy", ".35em")
// 			.attr("x", function(d,i){return i*32})
//       .text(function(d) { return d; });

text.exit().remove();

}

update(alphabet);

d3.interval(function() {
  update(d3.shuffle(alphabet)
      .slice(0, Math.floor(Math.random() * 26))
      .sort());
}, 1000);
 
</script>

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