d3.js - D3 : Delayed Display by setTimeout or setInterval-6ren

d3.js - D3 : Delayed Display by setTimeout or setInterval

转载作者：行者123 更新时间：2023-12-02 09:36:02

25

4

我试了一整天了，还是没成功。我想以某种延迟的方式显示一串文本。例如，一开始显示“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>

最佳答案

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.js - D3 : Delayed Display by setTimeout or setInterval，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/26186394/

25

4

0

文章推荐： R:对列表中每个列表的元素求和，并在数据框中返回结果

文章推荐： java - sqlite 数据库返回空对象引用

文章推荐： java - 如何在 lambda 函数中延迟初始化 Map？

文章推荐：关于C程序错误的困惑

JavaScript:setTimeOut 位于另一个 setTimeOut 中(嵌套 setTimeOut)以刺激 API 响应不起作用
要求:用户连续扫描文本框中的作业编号，没有任何延迟。对于每个职位编号，我需要在后台调用 API 来获取扫描职位编号的详细信息。我做了什么:我编写了一个小模拟代码来激发这个需求。我使用 setTime
javascript - setTimeout 等待 setTimeout
我遇到了一个问题:该代码应该按该顺序输出“hi1”“hi2”“hi3”“hi4”。我写了这个简化的代码，实际代码更复杂，导致我无法删除我标记的一些功能。 function test() { c
javascript - 当此 setTimeout() 调用父级中的另一个 setTimeout() 时，如何在 iframe 中运行带有 setTimeout() 回调的函数？
我的页面上有一个动态创建的 iframe。像这样: var iframe = document.createElement('iframe'); iframe.setAttribute("id","m
javascript - setTimeout() 在 setTimeout 激活之前获取窗口以显示其他脚本函数
我确信这是一个被问过很多次的通用问题，但找不到解决方案。我有 javascript 使用 setTimeout() 函数来关闭我在设定时间后创建的弹出窗口。问题:如果我在与创建弹出窗口的脚本相同的
javascript - setTimeout 循环等待另一个 setTimeout 循环
我想在第一个函数完成后执行第二个函数。结果: i: 0,i: 1,...,i: 9, j: 0,j: 1,...,j: 9 function first(callback){ for
javascript - SetTimeout 内的 SetTimeout 未触发
我正在尝试创建一个按钮，以反馈其正在执行的操作。在 Angular 中，我向服务器发出一个放置请求——此时我更改按钮的状态以指示这一点——然后当我收到响应时，我再次更改按钮的状态以反射(reflect
javascript - setTimeout 内的 setTimeout 内的 setInterval
我正在尝试制作一个字符串，它会逐个字母地写出自己直到完成句子，并且每个字母出现的速度基于从 1 到 10 不等的输入。在字符串的末尾，它会闪烁5 秒，直到外星人出现。我的想法是创建一个 setInte
meteor - Meteor.setTimeout() 与 setTimeout() 相比有何意义？
在 Meteor 中，为什么要使用 Meteor.setTimeout() 而不是普通的 setTimeout()？使用 Meteor.setTimeout() 而不是单纯的 setTimeout
javascript - 在 setTimeout 内创建 setTimeout 以停止
我有这个代码 - function example() { var i = 0; function add() { i++; } setTimeout(
javascript - window.setTimeout() 和 setTimeout() 有什么区别？
我想知道它们之间有什么区别 window.setTimeout(myFancyFunciton, 1000); 和 setTimeout(myFancyFunciton, 1000); 两者似乎都在做
php - javascript setTimeOut - 不在嵌套的 setTimeout 上运行
好吧，我好像遇到了问题。我正在尝试创建一个twicker 来显示数据行。我正在使用 jquery/javascript 在一定时间后隐藏和显示行。代码如下: var timer_is_on
javascript - 使用 setTimeout 从创建 setTimeout 时恢复变量值？
编辑:我最终想在以后使用 setTimeout 恢复变量的先前值我创建了以下示例来说明我的观点:( JSFiddle ) Push the button Try it var x = {};
javascript - window.setTimeout 与 setTimeout？哪一个更好？
我一直在像这样在没有窗口父级的情况下使用超时: setTimeout(FUNC, 1000); 我很好奇，我应该这样使用它吗？ window.setTimeout(FUNC, 1000); 有区别吗？
javascript - 操作 setTimeout 函数中由先前 setTimeout 函数创建的对象
我有一个使用 setTimeout 函数执行动画的函数，结构如下: animation: function() { //first setTimeout(function(){ mak
javascript - setTimeOut 是未捕获的 ReferenceError : setTimeOut is not defined
关闭。这个问题是not reproducible or was caused by typos .它目前不接受答案。这个问题是由于错别字或无法再重现的问题引起的。虽然类似的问题可能是on-topi
javascript - 我可以在另一个 setTimeout 的处理程序中有一个 setTimeout 吗？
这是一个快速的(损坏的)jsfiddle:http://jsfiddle.net/wH2qF/ 由于某种原因这不起作用...是因为我在另一个 setTimeout 的处理程序中有一个 setTimeo
javascript - 将 setTimeout 放置在带有 if 条件的 setTimeout 中
我有两个 setTimouts，如下所示，根据 if 条件，我想跳过一个超时。 var batchID = []; batchID = getBatchIDs();//this function ge
javascript - 使用 window.setTimeout 而不是 setTimeout 有什么好的理由吗？
我只看到一种情况我应该使用 window.setTimeout 而不是 setTimeout，当我在我的闭包，这显然不是很好的做法(除非有非常特殊的用途)。我注意到 Google Closure 编
javascript - 为什么人们使用 setTimeout ("func()", ... ) 而不是 setTimeout(func, ... )
我看到这个用了很多，有人告诉我把函数引用放在引号之间是不好的，因为 setTimeout/setInterval evals 引用。这两者之间的实际区别是什么，以至于一个被使用在另一个之上？为什么我看
javascript - setTimeout(myFunction, 5000);与 setTimeout(myFunction(), 5000);
我正在使用“setTimeout”函数。此代码按预期运行: function myFunction() { console.log('test'); setTimeout(myFunc

首页

博学

6Ren·AI

商城

d3.js - D3 : Delayed Display by setTimeout or setInterval