Example
var myData = [
{ name: "test1", value: "ok" },
{ name: "test2", value: "nok" }
]
// We have to select elements (here div.samples)
// and assign data. The second parameter of data() is really important,
// it will determine the "key" to identify part of data (datum) attached to an
// element.
var mySelection = d3.select(document.body).selectAll("div.samples") // <- a selection
.data(myData, function(d){ return d.name; }); // <- data binding
// The "update" state is when a datum of data array has already
// an existing element associated.
mySelection.attr("class", "samples update")
// A datum is in the "enter" state when it's not assigned
// to an existing element (based on the key param of data())
// i.e. new elements in data array with a new key (here "name")
mySelection.enter().append("div")
.attr("class", "samples enter")
.text(function(d){ return d.name; });
// The "exit" state is when the bounded datum of an element
// is not in the data array
// i.e. removal of a row (or modifying "name" attribute)
// if we change "test1" to "test3", "test1" bounded
// element will figure in exit() selection
// "test3" bounded element will be created in the enter() selection
mySelection.exit().attr("class", "samples remove");
