This example demonstrates the complete API for d3-component.
Built with blockbuilder.org
license: mit |
This example demonstrates the complete API for d3-component.
Built with blockbuilder.org
<!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> |