Skip to content

Instantly share code, notes, and snippets.

@curran
Last active March 25, 2017 06:59
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save curran/c3d9783e641636479fa8e07a480e7233 to your computer and use it in GitHub Desktop.
Save curran/c3d9783e641636479fa8e07a480e7233 to your computer and use it in GitHub Desktop.
Hello d3-component
license: mit
<!DOCTYPE html>
<head>
<style>
.some-class {
text-align: center;
font-family: sans;
}
</style>
</head>
<body>
<script src="https://unpkg.com/d3@4"></script>
<script src="https://unpkg.com/d3-component@3"></script>
<script>
var myComponent = d3.component("div", "some-class")
.create(function (selection, d){ // Invoked for entering component instances.
selection
.style("font-size", "0px")
.transition()
.style("font-size", "80px");
})
.render(function (selection, d){ // Invoked for entering AND updating instances.
selection.text(d);
})
.destroy(function (selection, d){ // Invoked for exiting component instances.
return selection // You can return a transition here to delay node removal.
.transition().duration(600)
.style("font-size", "0px");
})
.key(function (d){ return d; });
// Render a single instance of the component.
d3.select("body").call(myComponent, "Hello d3-component!");
setTimeout(function (){
d3.select("body").call(myComponent, "There may be");
}, 3000);
setTimeout(function (){
d3.select("body").call(myComponent, [
"There may be",
"multiple"
]);
}, 4000);
setTimeout(function (){
d3.select("body").call(myComponent, [
"There may be",
"multiple",
"instances!"
]);
}, 5000);
setTimeout(function (){
d3.select("body").call(myComponent, []);
}, 8000);
</script>
</body>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment