D3：通过setTimeout或setInterval延迟显示

Question

D3：通过setTimeout或setInterval延迟显示

ngu*_*ngo 2 settimeout setinterval d3.js

我已经整天尝试过了，还没有。我想以某种延迟的方式显示文本字符串。例如，首先显示“ a”，然后等待一秒钟，然后显示“ ab”，然后等待一秒，然后显示“ abc”，到目前为止，等等。

我使用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>

Run Code Online (Sandbox Code Playgroud)

Answer 1

Zac*_*chB 5

该update呼叫需要在你的setTimeout功能，如：

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

Run Code Online (Sandbox Code Playgroud)

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

编辑：您可能还希望您的代码像这样，完全删除更新功能（也许您有使用多个单独<text>元素的原因？）：

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

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

Run Code Online (Sandbox Code Playgroud)

归档时间：	11 年，3 月前
查看次数：	6810 次
最近记录：	11 年，3 月前