Javascript 在d3中连续平移整个阵列

var bardata=[]//保存烛台图表当前值的数组
var pastRectangles=[50,12,14,15,35,64]//保存要绘制的历史矩形的数据
var数据；
setInterval（函数（）{
var x=Math.floor（Math.random（）*100）//生成一个介于0-99之间的随机整数
push（x）；//将该值推送到bardata数组中
//console.log（bardata）
data=x；//将x的值设置为data，将用于每10秒更新一次Past矩形数组
}, 1000);
可变高度=900
，宽度=900
，条宽=50
，巴罗夫特=55；
var offset=pastRectangles.length*（barOffset+barWidth）；
var scale=d3.scale.linear（）
.范围（[0，过去的矩形]）
.域（[0，高度]）；
var svg=d3.select（'body'）
.append（'svg'）
.attr（'width'，width）
.attr（'height'，height）
.style（'背景'，'黑色'）
.附加（“g”）
.attr（“类”、“矩形”）
更新（pastRectangles[pastRectangles.length-1]）；
pastDraw（）；//调用post draw，在update函数开始运行之前首先绘制虚拟数据
函数pastDraw（）
{
var pastRect=svg.selectAll（'rect'）.data（pastrectals）；//此函数将在pastrectals数组中循环，并将
pastRect.enter（）//为数组中的每个索引绘制一个rectange
.append（“rect”）//不使用bardata的原因是它只保存一个值
.attr（“g”，“矩形”）
.attr（“x”，函数（d，i）{return i*（barWidth+barOffset）}）//每秒一次，因此需要第二个数组来保存
.attr（“y”，函数（d）{返回高度-d}）//历史数据
.attr（“高度”，函数（d）{返回d}）
.attr（“宽度”，60）
.attr（“id”、“历史记录”）
.attr（“填充”、“钢蓝”）
passrect.transition（）
.持续时间（1000）
.ease（“线性”）
.attr（“高度”，功能（d）{
返回d
})
pastRect.exit（）
}
功能更新（bardata）{
var rect=svg.selectAll（'rect'）.data（[bardata]）；//此函数实际上为每个
rect.enter（）//但是，由于bardata是
.append（“rect”）//每秒删除一个新值的当前值
.attr（“x”，offset）//它给人一种矩形定期更新的错觉
.attr（“y”，函数（d）{返回高度-d}）
.attr（“id”、“updateBar”）
.attr（“高度”，bardata）
.attr（“宽度”，60）
.attr（“填充”、“钢蓝”）
rect.transition（）
.持续时间（1000）
.ease（“线性”）
.attr（“高度”，功能（d）{
返回d
})
//rect.exit（）.transition（）
//.持续时间（1000）
//.attr（“转换”、“转换（-80,0）”）
//.remove（）；
//		
//控制台日志（bardata）；
}
函数moveBar（）
{
svg.selectAll（“历史”）
.transition（）
.持续时间（1000）
.attr（“转换”、“转换（-80,0）”）
svg.选择（“更新”）
.transition（）
.持续时间（1000）
.attr（“转换”、“翻译（80,0）”）
}
setInterval（函数（）{
update（bardata）；//使用bardata的当前值调用update函数
bardata.shift（）；//从bardata中删除数组的最后一个索引
}, 1000)
setInterval（函数（）{
push（data）//每10秒用最新值x更新pastRectangles数组
pastDraw（）；//调用pastDraw函数来绘制最新的重新绘制
moveBar（）；
}，10000）

---

我没有将整个数字数组向左移动，而是通过编写simpe moveBars函数，最终使updatebar向右移动

    function moveBar()
        {
            var bar = svg.selectAll("#updateBar")           
                .transition()
                .duration(50)
                .attr("transform", "translate("+move+",0)")
                move += (barWidth+barOffset);
                console.log(move)
        }

然后我在pastDraw（）函数中调用了它，它每十秒钟调用一次

var bardata=[]//保存烛台图表当前值的数组
var pastRectangles=[50,12,14,15,35,64]//保存要绘制的历史矩形的数据
var数据
，高度=250
，宽度=800
，条宽=50
，巴罗夫特=55；
var=0；
setInterval（函数（）{
var x=Math.floor（Math.random（）*100）//生成一个介于0-99之间的随机整数
push（x）；//将该值推送到bardata数组中
data=x；//将x的值设置为data，将用于每10秒更新一次Past矩形数组
}, 1000);
数据=（barOffset+barOffset）
var offset=pastRectangles.length*（barOffset+barWidth）；
var scale=d3.scale.linear（）
.范围（[0，过去的矩形]）
.域（[0，高度]）；
var svg=d3.select（'body'）
.append（'svg'）
.attr（'width'，width）
.attr（'height'，height）
.style（'背景'，'红色'）
.附加（“g”）
.attr（“类”、“矩形”）
更新（pastRectangles[pastRectangles.length-1]）；
pastDraw（）
函数pastDraw（）
{
var pastRect=svg.selectAll（'rect'）.data（pastrectals）；//此函数将在pastrectals数组中循环，并将
pastRect.enter（）//为数组中的每个索引绘制一个rectange
.append（“rect”）//不使用bardata的原因是它只保存一个值
.attr（“g”，“矩形”）
.attr（“x”，函数（d，i）{return i*（barWidth+barOffset）}）//每秒一次，因此需要第二个数组来保存
.attr（“y”，函数（d）{返回高度-d}）//历史数据
.attr（“高度”，函数（d）{返回d}）
.attr（“宽度”，60）
.attr（“id”、“历史记录”）
.attr（“填充”、“钢蓝”）
passrect.transition（）
.持续时间（1000）
.ease（“线性”）
.attr（“高度”，功能（d）{
返回d
})
pastRect.exit（）
var bar=svg.selectAll（#updateBar）
.transition（）
.持续时间（1000）
.attr（“转换”、“平移”（+move+”，0）”）
移动+=（线宽+气压偏移）；
s