D3 Examples - So I need to call the data again?

xxxxxxxxxx
 
<meta charset="utf-8">
<body></body>
<script src="https://d3js.org/d3.v3.min.js"></script>
<script>
var currentLine = 0;
​
var svg = d3.select("body")
  .append("svg")
  .attr("width", 960)
  .attr("height", 500)
  .append("g")
  .attr("transform", "translate(180,200)")
​
d3.text("poem", function(poem) {
  var data = poem.split("\n");
  var lines = svg.selectAll("text")
    .data(data)
    .enter().append("text")
    .text(String)
    .attr("x", function(d,i) { return 4*(i-currentLine); })
    .attr("y", function(d,i) { return 24*(i+1); })
    .style("opacity", function(d,i) { return 1/Math.pow((i+1),1.2); })
    .attr("transform", function(d,i) { return "rotate(" + Math.pow(i-currentLine,2)/10 + ")" })
​
  setInterval(rollText, 1120);
​
  function rollText() {
    currentLine++;
​
    svg.transition()
       .duration(1120)
       .ease("linear")
       .attr("transform", "translate(180," + (200-(24*currentLine)) + ")");
​
     lines.transition()
       .duration(700)
       .ease("sin")
       .style("opacity", function(d,i) { return 1/Math.pow((Math.abs(currentLine-i)+1),1.2); })
       .attr("transform", function(d,i) { return "rotate(" + Math.pow(i-currentLine,2)/10 + ")" })
       .attr("x", function(d,i) { return 4*(i-currentLine); })
  };
});
</script>
<style>
svg {
  height: 800px;
}
svg text {
  font-size: 16px;
  font-family: Helvetica, Arial, sans-serif;
}
</style>
​
    