Javascript

Question

我试图制作动画无限滚动条＆＃34;旋转木马＆＃34; ，将用作简单的时间表。

这是example

          var calcData = [5,10,15,20,30,40,55,75,55,40,30,20,15,10,5];
      var barWidth = 5;
      var barPadding = 20;
      var svg = d3.select("#chart").append('svg')
                            .attr("width",360)
                            .attr("height",200);

      var len = calcData.length;  

      for ( var i=0 ; i < len ; i++ ) {

              svg.append("rect")
                        .attr("class","rect-tick")
                        .attr("x", function() { return (barWidth + barPadding) * i})
                        .attr("y", 200 - calcData[i] * 2)
                        .attr("height", calcData[i] * 2)
                        .attr("width",barWidth);



      }

      function removeFirst(bound) {

          console.dir(bound.nodes()[0].remove());

      }



      function turnLeft() {

              //append last child rect
              var blockFlag = 0;
              var lastX = svg._groups[0][0].lastChild.x.baseVal.value;
              svg.append("rect")
                      .attr("class","rect-tick")
                      .attr("x", 350)
                      .attr("width", barWidth)
                      .attr("y", 200)
                      .attr("height", 0);

               //scroll left


               svg.selectAll("rect").transition("i" + Date.now()).duration(200)
                                .attr("x",function(d,i) {return (barWidth + barPadding)*i - (barWidth +                                                                                                 barPadding)})
                                .attr("height",function(d,i) {
                                        if (i===0) {
                                          return 0;
                                        }
                                        else {
                                            return calcData[i-1] * 2;

                                        }
                                })
                                .attr("y",function(d,i) {

                                    if (i===0) {

                                        return 200;

                                    }
                                    else {
                                      return 200 - (calcData[i-1] * 2);
                                    }
                                }).call(removeFirst);


      }

      d3.select("button").on("click",function(){

        svg.selectAll("rect").transition().duration(0);
        turnLeft();
      });


      turnLeft();

我想知道是否每次删除和追加孩子＆＃34;滚动＆＃34;是解决这个问题的正确方法。

我真的很感谢你的帮助!!