Create a gist now

Instantly share code, notes, and snippets.

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 a…
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Joinery</title>
<script src="http://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>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment