Animation D3.js-尝试使用持续时间循环动画_Animation_D3.js

Animation D3.js-尝试使用持续时间循环动画

animation d3.js

Animation D3.js-尝试使用持续时间循环动画,animation,d3.js,Animation,D3.js,我正在编写一些很棒的D3教程，以及对给定代码段的修改，我有一些相当简单的问题我想在代码中循环两个函数好几次。但我不能。你能看出我的问题在哪里吗这就是不循环工作的代码： <!DOCTYPE html> <html> <head> <script type="text/javascript" src="d3.v2.js"></script> </head> <body> <div id="v

我正在编写一些很棒的D3教程，以及对给定代码段的修改，我有一些相当简单的问题

我想在代码中循环两个函数好几次。但我不能。你能看出我的问题在哪里吗

这就是不循环工作的代码：

<!DOCTYPE html>
<html>
<head>
    <script type="text/javascript" src="d3.v2.js"></script>
</head>
<body>
    <div id="viz" style="height:80px; width:80px;"></div>
    <script type="text/javascript">

    var sampleSVG = d3.select("#viz")
        .append("svg")
        .attr("width", 300)
        .attr("height", 300);   

    sampleSVG.append("circle")
        .style("stroke", "gray")
        .style("fill", "white")
        .attr("r", 40)
        .attr("cx", 50)
        .attr("cy", 50)
        .on("mouseover", function(){d3.select(this).style("fill", "aliceblue");})
        .on("mouseout", function(){d3.select(this).style("fill", "white");})
        .on("mousedown", animateFirstStep);

    function animateFirstStep(){
         d3.select(this)
             .transition()           
            .delay(0)           
            .duration(1000)
            .attr("cx", 50)
            .attr("cy", 50)
            .attr("r", 10)
            .style("fill", "green")
            .each("end", animateSecondStep);
    };

    var newColor = function(d) {
                return 'rgb(' + Math.floor(255 * Math.random()) +
                   ', ' + Math.floor(255 * Math.random()) +
                   ', ' + Math.floor(255 * Math.random()) + ')';
                }


    function animateSecondStep(){
        d3.select(this)
          .transition()
            .duration(1000)
            .attr("r", 40)
            .style("fill", newColor)
            .each("end", animThirdStep)
        };   

    function animThirdStep() {
        d3.select(this)
            .transition()
            .duration(1000)
            .attr("r", 25)
            .style("fill", newColor);
    }

    </script>
</body>
</html>


var sampleSVG=d3.选择（“即”）
.append（“svg”）
.attr（“宽度”，300）
.attr（“高度”，300）；
sampleSVG.append（“圆”）
.style（“笔划”、“灰色”）
.样式（“填充”、“白色”）
.attr（“r”，40）
.attr（“cx”，50）
.attr（“cy”，50）
.on（“mouseover”，function（）{d3.select（this）.style（“fill”，“aliceblue”）；}）
.on（“mouseout”，function（）{d3.select（this）.style（“fill”，“white”）；}）
.on（“鼠标向下”，动画第一步）；
函数animateFirstStep（）{
d3.选择（本）
.transition（）
.延迟（0）
.持续时间（1000）
.attr（“cx”，50）
.attr（“cy”，50）
.attr（“r”，10）
.style（“填充”、“绿色”）
.每个（“结束”，动画第二步）；
};
var newColor=函数（d）{
返回“rgb（”+Math.floor（255*Math.random（））+
“，”+Math.floor（255*Math.random（））+
“，”+Math.floor（255*Math.random（））+”；
}
函数animateseSecondStep（）{
d3.选择（本）
.transition（）
.持续时间（1000）
.attr（“r”，40）
.style（“填充”，新颜色）
.每个（“结束”，第三步）
};   
函数animThirdStep（）{
d3.选择（本）
.transition（）
.持续时间（1000）
.attr（“r”，25）
.样式（“填充”，新颜色）；
}

这就是我如何尝试循环（函数animateFirstStep）：

函数animateFirstStep（）{
var i=0；
d3.选择（本）
.transition（）
.延迟（0）
.持续时间（1000）
.attr（“cx”，50）
.attr（“cy”，50）
.attr（“r”，10）
.style（“填充”、“绿色”）
.每个（“结束”，功能（i）{
而（i<5）{
第二步；
第三步；
i++；
}
});           
};

有什么建议吗？（朋友建议它不工作，因为调用函数和动画执行的持续时间之间存在时间差，但我不知道如何解决它）

干杯。

此外，如果没有服务器模拟器，我如何访问d3文件？我想能够发送d3库+我的html文件给朋友，但没有服务器它不会加载。提前感谢您的附加部分，只需更改html标题中的源代码：现在您可以将其发送给您的朋友

        function animateFirstStep(){
         var i=0;
        d3.select(this)
             .transition()           
            .delay(0)           
            .duration(1000)
            .attr("cx", 50)
            .attr("cy", 50)
            .attr("r", 10)
            .style("fill", "green")
            .each("end", function(i) {
                while(i < 5) {
                    animateSecondStep;
                    animThirdStep;
                    i++;
                }
            });           
    };