Question

我正在研究一些很棒的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>

这就是我试图循环的方法（函数animateFirstStep）：

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

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

干杯。

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

0 个答案: