Created
January 23, 2013 01:46
-
-
Save migurski/4601038 to your computer and use it in GitHub Desktop.
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…
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!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