Skip to content

Instantly share code, notes, and snippets.

@Fintan
Last active December 14, 2015 17:59
Show Gist options
  • Save Fintan/5126133 to your computer and use it in GitHub Desktop.
Save Fintan/5126133 to your computer and use it in GitHub Desktop.
D3.js snippet to help understand enter/update/exit good tutorial here: http://mbostock.github.com/d3/tutorial/circle.html
//select p tags to manipulate
d3.select("body").selectAll("p")
//initial dataset
.data([4, 8, 15, 16, 23, 42])
//create any nodes that don't already exist (all of them)
.enter().append("p")
//set the node text based on the data
.text(function(d) { return "I’m number " + d + "!";})
//updated dataset (note: the length is shorter)
.data([4, 15, 23, 8, 57])
//set the node text based on the updated data
.text(function(d) { return "I’m number " + d + "!"; })
//also modify some styles this time
.style("font-size", function(d) { return d + "px"; })
.style("text-decoration","line-through")
//finished
.exit()
//remove the nodes no longer needed
.remove();
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment