Hello d3-component by curran

index.html

<!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>