1

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

有什么建议么？（朋友建议由于函数调用和动画执行持续时间之间的时间差异而无法正常工作-但我不知道如何解决）

干杯。

4

0 回答 0