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延遲顯示

回答

相關問題