我试图制作动画无限滚动条＆＃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;是解决这个问题的正确方法。
我真的很感谢你的帮助!!