D3：通过setTimeout或setInterval延迟显示

我已经试过这一整天，并没有得到它。我想以某种延迟的方式显示一串文本。例如，首先它显示“a”然后等待一秒钟然后显示“ab”，然后等待一秒钟然后显示“abc”，到目前为止......D3：通过setTimeout或setInterval延迟显示

我使用D3来显示，函数切片从字母表中生成部分文本字符串。我使用setTimeout或setInterval。没有用。我感谢一些帮助。这里是我的代码：

<!DOCTYPE html> 
<html> 
    <head> 
     <style> 
      text { 
       font: bold 48px monospace; 
      } 
      .enter { 
       fill: green; 
      } 
      .update { 
       fill: #333; 
      } 
     </style> 
    </head> 
    <body> 
     <script src="http://d3js.org/d3.v3.min.js"></script> 
     <script> 
      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); 
      */ 
     </script> 
    </body> 
</html>

来源

2014-10-03 ngungo

的update调用需要在你的setTimeout功能，如：

setTimeout(function() { 
    update(alphabet.slice(0, 1)); 
}, 3000);

setTimeout是非阻塞的;定时器启动后，它执行作为参数传入的函数。

编辑：您也可能希望你的代码是这样的，完全去除更新功能（也许你有使用许多不同的<text>元素的原因？）：

var label = svg.append("text"); 

var i = 1; 
setInterval(function() { 
    label.text(alphabet.slice(0, i++).join("")); 
}, 1500);

来源

2014-10-03 20:35:54 ZachB

有了这一点，显示“A”然后“ab”，我怎样才能让它成为“abc”以及更进一步。 – ngungo 2014-10-03 20:49:16

用一种方法来编辑。 – ZachB 2014-10-03 23:15:31

应该说我是i ++还是clearInterval的一个条件？不管怎么样，非常感谢，我明白了。） – ngungo 2014-10-03 23:46:30

D3：通过setTimeout或setInterval延迟显示

回答

相关问题