erkal · August 29, 2015 13:57
diff --git a/README.md b/README.md
diff --git a/index.html b/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>
diff --git a/thumbnail.png b/thumbnail.png
	<!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>