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().

var aryInts = [ 1, 2, 3 ];
var aryArrayInts = [ [1], [2], [3] ];
var aryObjectArray = [ { "key1": [ 3, 4 ] },
                       { "key2": [ 5, 6 ] }, 
                       { "key3": [ 7, 8 ] } ];
var aryObjectVal = [ { "key": "key1", "value": "value1" },
                     { "key": "key2", "value": "value2" },
                     { "key": "key3", "value": "value3" } ];

Here’s the html.

<body>
  <div id="div1"></div>
  <div id="div2"></div>
</body>

Selecting existing DOM objects

var sel = d3.select("div"); 
// sel = Array(div#d1)
var sel = d3.selectAll("div"); 
// sel = Array(div#d1, div#d2)

Update

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

Tagged on: