Skip to content

Instantly share code, notes, and snippets.

@erkal

erkal/README.md

Last active August 29, 2015 13:57
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 erkal/9871234 to your computer and use it in GitHub Desktop.
Save erkal/9871234 to your computer and use it in GitHub Desktop.
Download ZIP
General Update Pattern with playButton
Raw
README.md

General Update Pattern with playButton

This is an illustration of playButton

Most of the code (including all commentaries) is copied from General Update Pattern

Raw
index.html
<!DOCTYPE html>
<meta charset="utf-8">
<title>General Update Pattern with playButton</title>
<style>
#messageText{
font-size: 100px;
text-anchor: middle;
}
.numero{
font-size: 50px;
}
.join{
fill: lightgray;
}
.update{
fill: steelblue;
}
.enter{
fill: limegreen;
}
.exit{
fill: red;
}
</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);
svg.append("text")
.attr("id", "messageText")
.attr("x", width/2)
.attr("y", 140);
var numerosg = svg.append("g")
.attr("transform", "translate(0, 400)")
var data = [1,2,3,4,5,6];
var newdata = [3,4,5,6,7,8,9];
// Create svgs for data
numerosg.selectAll(".numero")
.data(data)
.enter().append("text")
.classed("numero", true)
.attr("transform", pos)
.text(function(d) { return d });
// ----------------------------------------------------------------------
write("join");
// Join new data with old elements.
var svgNumeros = numerosg.selectAll(".numero")
.data(newdata, function(d) { return d });
var fnList = [
function() { write("update"); update(); },
function() { write("enter"); enter(); },
function() { write("enterAndUpdate"); enterAndUpdate(); },
function() { write("exit"); exit(); }
]
playButton(svg, fnList, width/2 -25, 220);
// ----------------------------------------------------------------------
function pos(d) {return "translate("+ (250 + 50 * d) +", 0)"}
function write(text) { d3.select("#messageText").attr("class", text).text(text) }
// ----------------------------------------------------------------------
// Update old elements as needed.
function update () {
svgNumeros.classed("update", true);
}
// Create new elements as needed.
function enter () {
svgNumeros
.enter().append("text")
.classed({"numero": true, "enter": true})
.text(function(d) { return d })
.attr("transform", pos);
}
// Appending to the enter selection expands the update selection to include
// entering elements; so, operations on the update selection after appending to
// the enter selection will apply to both entering and updating nodes.
function enterAndUpdate () {
svgNumeros.transition().ease("bounce").duration(1000).style("font-size", 120);
}
// Remove old elements as needed.
function exit () {
svgNumeros
.exit()
.classed("exit", true)
.transition().duration(800).style("opacity", 0)
.remove();
}
// ----------------------------------------------------------------------
function playButton(svg, fnList, x, y) {
var i = 0;
var button = svg.append("g")
.attr("transform", "translate("+ x +","+ y +")");
button
.append("rect")
.attr("width", 50)
.attr("height", 50)
.attr("rx", 4)
.style("fill", "steelblue");
button
.append("path")
.attr("d", "M15 10 L15 40 L35 25 Z")
.style("fill", "white");
button
.append("title")
.text(String(fnList[0]));
button
.on("mousedown", function() {
d3.select(this).select("rect")
.style("fill", "white")
.transition().style("fill", "steelblue");
fnList[i]();
i++;
d3.select(this).select("title").text(String(fnList[i]));
if (i == fnList.length) d3.select(this).remove();
});
}
</script>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment