1

私はいくつかの素晴らしいD3チュートリアルと、与えられたスニペットへの変更に取り組んでいます。かなり単純な（私が思うに）質問があります。

コード内の2つの関数を数回ループしたいと思います。しかし、私はできません。私の問題はどこにあるのか分かりますか？

これは、ループせずに機能するコードです。

<!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