General Update Pattern with playButton

General Update Pattern with `playButton`

This is an illustration of playButton

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

<!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="https://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 });

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>

Modified http://d3js.org/d3.v3.min.js to a secure url

https://d3js.org/d3.v3.min.js