title: D3: Delayed Display by setTimeout or setInterval
body: <p>I've tried this all day long and haven't got it. I would like to display a string of text in some delaying fashion. For example, at first it displays "a" then waits for a second then display "ab", and then waits for a second then display "abc", so far so on ...</p>
  
  <p>I use D3 to display, function slice to generate partial text string from the alphabet. I use either setTimeout or setInterval. None works. I appreciate some help. Here is my code:</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
      &lt;head&gt;
          &lt;style&gt;
              text {
                font: bold 48px monospace;
              }
              .enter {
                fill: green;
              }
              .update {
                fill: #333;
              }
          &lt;/style&gt;
      &lt;/head&gt;
      &lt;body&gt;
          &lt;script src="http://d3js.org/d3.v3.min.js"&gt;&lt;/script&gt;
          &lt;script&gt;
              var alphabet = "abcdefghijklmnopqrstuvwxyz".split("");
              var width = 1000,
                  height = 200;
  
              var svg = d3.select("body")
                .append("svg")
                  .attr("width", width)
                  .attr("height", height);
  
              var svg = d3.select("body").append("svg")
                  .attr("width", width)
                  .attr("height", height)
                .append("g")
                  .attr("transform", "translate(32," + (height / 2) + ")");
  
              function update(data) {
                  var text = svg.selectAll("text").data(data);
                  text.attr("class", "update");
                  text.enter().append("text")
                      .attr("class", "enter")
                      .attr("x", function(d, i) { return i * 32; })
                      .attr("dy", ".35em");
  
                  text.text(function(d) { return d; });
                  text.exit().remove();
              }
  
              // Method 1 - NOT WORKING
              update(alphabet.slice(0, 1)); 
              setTimeout(function(){},3000)
              update(alphabet.slice(0, 2)); 
              setTimeout(function(){},3000)
              update(alphabet.slice(0, 3)); 
              // ...
  
              /*/ Method 2 - NOT WORKING
              var i = 1;
              setInterval(function(i) {
                update(alphabet.slice(0, i));
                i++;
              }, 1500);
              */
          &lt;/script&gt;
      &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>