sel.datum(aryData) vs. sel.data(aryData)

.datum() gives aryData to all elements in the selection.

.data() gives one unique array value in aryData to each element in the selection (i.e. .update()). It also has .enter() and .exit() as methods.

Example

Here’s the data we’ll use with .data() and .datum().

Here’s the html.

Selecting existing DOM objects

Update

.select().data() gives aryInts[i] to each div and sets the div.__data__ value.

.selectAll().data() gives aryInts[i] to each div, sets div.__data__ and creates a placeholder div for the third element in the array.

.datum(aryData, [keyFunc])

.select().datum() gives aryInts to the first div.

.selectAll().datum() gives aryInts to both divs.

.data(aryData).enter()

If aryData.length > number of elements in selection, it appends new elements in the selection starting at aryData[aryData.length-1].

.data(aryData).exit()

If aryData.length < number of elements in selection, it appends missing real elements in the selection starting at aryData[aryData.length].

.data(aryData).enter().append(elem)

Appends enter() elements and removes exiting elements. Attributes, styles and other properties of updating elements can be modified. Null elements in the update selection, such as when the aryData < number_of_elements in selection, are replaced with the newly created elements from the enter selection.

This post was based on the information from Mike Bostocks excellent post at http://bost.ocks.org/mike/selection/.

Tagged on: