Small example showing D3 data with and without a key function. D3 takes a second argument to the data() method, a function that returns a join key for each data element passed in. Without this, it assumes that the array index and not the array element are important. I had been passing in three-element arrays, and D3 assumed that I was updating array values in-place rather than attempting to introduce new ones. This example shows D3's set behavior with and without the use of a key function. The visible results are the same in both cases, but the second one (by value) adds and removes many more div elements than the first (by index). The first version might be used to update the heights of bars in a bar chart in-place, while the second might be used to animate the addition and removal of bars. by migurski

index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8" />
	<title>Joinery</title>
    <script src="//d3js.org/d3.v3.min.js" type="application/javascript"></script>
    <style title="text/css">
    <!--
    
        div { margin: 5px; padding: 5px 10px; color: white; float: left }
        
        div.by-index { background-color: red }
        div.by-value { background-color: green }
    
    -->
    </style>
</head>
<body>
    <script type="application/javascript">
    <!--
    
        var body = d3.select(document.body),
            arrays = [[1, 2, 3], [2, 3, 4, 5], [6, 7, 8]],
            divs,
            data;
        
        //
        // Run through once identifying data elements by array index.
        //
        for(var i in arrays)
        {
            console.log('-- do array', arrays[i], 'by index');
            
            // You can't reuse body.selectAll()
            divs = body.selectAll('div.by-index');
            
            // Pass in the array only.
            data = divs.data(arrays[i]);

            // Enter and exit chain onto the result of data()
            data.enter().append('div').attr('class', 'by-index').each(enterlog);
            data.exit().remove().each(exitlog);
            data.text(text);
        }
            
        //
        // Run through again, using id() to identify data elements by value.
        //
        for(var i in arrays)
        {
            console.log('== do array', arrays[i], 'by value');
            
            // You can't reuse body.selectAll()
            divs = body.selectAll('div.by-value');
            
            // Pass in the array and the join function.
            data = divs.data(arrays[i], id);

            // Enter and exit chain onto the result of data()
            data.enter().append('div').attr('class', 'by-value').each(enterlog);
            data.exit().remove().each(exitlog);
            data.text(text);
        }

       /**
        * Boring utility functions below.
        */

        function id(num)
        {
            return num;
        }
    
        function text(d, i)
        {
            return d.toString() + ' (' + i.toString() + ')';
        }
        
        function enterlog(d, i)
        {
            console.log('enter div', text(d, i));
        }
    
        function exitlog(d, i)
        {
            console.log('exit div', text(d, i));
        }
    
    //-->
    </script>
</body>
</html>