A simple mechanism for step by step illustrations.
You can use it in aa loop: waitAndEval II
See also playButton.
A simple mechanism for step by step illustrations.
You can use it in aa loop: waitAndEval II
See also playButton.
<!DOCTYPE html> | |
<meta charset="utf-8"> | |
<title>waitAndEval</title> | |
<style> | |
#messageText{ | |
font-size: 60px; | |
text-anchor: middle; | |
} | |
</style> | |
<body> | |
<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script> | |
<script> | |
// ---------------------------------------------------------------------- | |
var width = 960, | |
height = 500; | |
var svg = d3.select("body").append("svg") | |
.attr("width", width) | |
.attr("height", height); | |
var messageText = svg.append("text") | |
.attr("id", "messageText") | |
.attr("x", width/2) | |
.attr("y", height/2); | |
var waitAndEval = newWaitAndEval(); | |
write("this text will stay here 8 secs"); | |
waitAndEval(function() { write("8 seconds have passed"); }, 8000); | |
waitAndEval(function() { write("4 more seconds have passed"); }, 4000); | |
waitAndEval(function() { write("2 more seconds have passed"); }, 2000); | |
function write (text) { messageText.attr("class", text).text(text) } | |
function newWaitAndEval () { | |
var t = 0; | |
return function (foo, dur) { | |
t += dur | |
setTimeout(foo, t) | |
}; | |
} | |
</script> |