Question

我整天都在尝试这个并且没有得到它。我想以一些延迟的方式显示一串文字。例如，它首先显示＆＃34; a＆＃34;然后等待一秒然后显示＆＃34; ab＆＃34;，然后等待一秒然后显示＆＃34; abc＆＃34;，到目前为止......

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

Answer 1

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);

D3：setTimeout或setInterval延迟显示

1 个答案: