个人中心
gpt4 book ai didi

javascript - For 循环在 D3.js 中不起作用

转载 作者：行者123 更新时间：2023-12-02 14:24:09 28 4
gpt4 key购买 nike

我是 Javascript 和 D3.js 的新手，并尝试在 for 循环中连续更改圆形元素。它的目的是每秒改变圆的半径，但结果发现半径只是跳到了 50，忽略了 26 到 49。

这是我的代码。

<!DOCTYPE html>
<meta charset="utf-8">
<style>

</style>
<body>
<script src="//d3js.org/d3.v3.min.js" charset="utf-8"></script>
<script src="//d3js.org/topojson.v1.min.js"></script>
<script>
    var width = 960,
            height = 1160;
    var svg = d3.select("body").append("svg")
            .attr("width", width)
            .attr("height", height);

    svg.append("circle").attr("cx", 100).attr("cy", 100).attr("r", 25).style("fill", "purple").attr('id','cc');

    for(i=26;i<=50;i++){
        var now=d3.select('#cc');
        now.transition().duration(1000).attr("r",i);
    }
</script>

最佳答案

在 JavaScript 中，当你说:

for(i=26;i<=50;i++){
    var now=d3.select('#cc');
    now.transition().duration(1000).attr("r",i);
}

不要认为 for 循环会等待 i=26 转换完成才转到 i=27。事实上，它为 i=26 调用语句 now.transition().duration(1000).attr("r",i);，然后立即转到循环的下一次迭代。由于循环的 i=26 和 i=50 迭代之间的时间差是无穷小的(速度仅受处理器速度的限制，目前处理器的速度为 GHz) )，您可以认为所有转换都被一起调用，并且立即观察到最后一个转换的效果。

实现此目的的一种方法是在每次调用之前设置时间延迟，并记住，该时间延迟必须是绝对的，因为所有迭代几乎在同一时刻被调用。例如，

第一个语句在 0 秒后调用。
1 秒后调用第二个语句。
2 秒后调用第三个语句。

只有这样，您才会看到调用之间 1 秒的相对差异。

另一种方法是使用 setTimeout() 例程递归地执行此操作。 建议采用这种方法。

var i = 26;

function myLoop () {
    setTimeout(function () {
        var now=d3.select('#cc');
        now.transition().duration(1000).attr("r",i);
        i++;
        if (i < 50) {
            myLoop();
        }
    }, 1000) // change this time (in milliseconds) to whatever you desire
}

myLoop(); // first call

关于javascript - For 循环在 D3.js 中不起作用，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/38418284/

28 4 0
文章推荐： spring - GORM无法从JAR引导
文章推荐： c# - DevExpress 日期选择器没有日期
文章推荐： c# - HttpHandler 重定向
文章推荐： php - TideSDK PHP通过SSH连接
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com