Understanding JoinsLet us assume that we have selected some DOM nodes using one of the select methods provided by d3 and stored it in a variable
selection. Now we can assign data to selection by
selection.data(data). Suppose we have n points in our data but there are less than n DOM nodes, extra nodes can be created by
selection.enter(). Note that these nodes will be empty. On other hand if there are greater than n DOM nodes, extra nodes are returned by
selection.exit(). The philosophy behind this is Instead of telling D3 how to do something, tell D3 what you want. So general d3 script will look something like this:
For illustartive example, you can have look at this post by Mike Bostock, the creator of D3.js.
var selection = d3.selecAll("circle"); selection.data(data); selection.exit().remove(); selection.enter().append('circle') //....and so on