title: How do I update text content in d3.js using tween function?
body: <p>I am trying to update my text element on click to roll out like it is being typed. When I click on the text, it should pull the next text element from the data array and print character by character until complete, however, nothing happens. No errors are thrown though. Attached below is the code.</p>
  
  <pre><code>    var data = [
          "Hello",
          "World!",
          "What's up?"
         ];
      var i = 0;
      var body = d3.select("body");
      var element = body.append("svg");
  
     element.append("text")
         .data(data)
         .text(function(d) {return d})
         .attr("x", 150)
         .attr("y", 75)
         .attr("text-anchor", "middle")
         .attr("fill", "white")
             .on("click", function() {
                 d3.select(this).transition()
                    .duration(5000)
                    .ease(d3.easeLinear)
                    .tween("text", function () {
                        var newText = data[i];
                        var textLength = newText.length;
                        return function (t) {
                            this.textContent = newText.slice(0, Math.round(t * textLength));
                };
            });
  
        //wrap around function for the data
        i = (i + 1) % data.length;
      });
  </code></pre>