Javascript 使数据点平稳过渡？

我试图让时间序列像我的x轴一样平稳地移动。本质上，我每200毫秒用一个新的随机测量值（即添加一个，删除一个）不断更新一个固定长度的数组。这是我的原始代码：

////////////////////////////////////////////////////////////
//////////////////////设立/////////////////////////////
////////////////////////////////////////////////////////////
常量边距={
左:80,，
右:80,，
前30名，
底数：165
};
//实际图形小于svg容器
变量宽度=$（“#图表”）.width（）-margin.left-margin.right；
变量高度=$（“#图表”）.height（）-margin.top-margin.bottom；
常数域=[0,70]；
constytickvalues=[0,10,20,30,40,50,60,70]；
常数时间间隔=200；
//xAxis域->10秒
const originalTime1=“1970-01-01T00:00:00”，
originalTime2=“1970-01-01T00:00:10”；
//获取自UNIX纪元以来的毫秒数
var date1=新日期（originalTime1）.getTime（），
date2=新日期（originalTime2）.getTime（）；
//随机测量
var度量=[]；
//毫秒间隔内的等间隔时间测量
var arraySize=Math.floor（Math.abs（date2-date1）/时间间隔）；
//随机测量
var-trueValue=25；
var准确度值=45；
var精度值=25；
////////////////////////////////////////////////////////////
/////////////////////////SVG//////////////////////////////
//////////////////////////////////////////////////////////// 
const svg=d3。选择（“图表”）
.append（“svg”）
.attr（“宽度”，宽度+边距。左侧+边距。右侧）
.attr（“高度”，高度+边距。顶部+边距。底部）；
常量g=svg.append（“g”）
.attr（“转换”、“平移”（+margin.left+）、“+margin.top+”）；
////////////////////////////////////////////////////////////
/////////////////////轴和刻度////////////////////////
////////////////////////////////////////////////////////////
var xAxisGroup=g.append（“g”）
.attr（“类”、“x轴”）；
var yAxisGroup=g.append（“g”）
.attr（“类”、“y轴”）；
//动态的
var xScale=d3.scaleTime（）；
//固定的
var yScale=d3.scaleLinear（）
.domain（[yDomain[0]，yDomain[1]]）
.范围（[height-margin.bottom，0]）；
常量xAxis=d3.axisBottom（xScale）
.滴答声（每（1）秒d3次）
.tickSizeInner（15）
.tickFormat（d3.timeFormat（“%M:%S”）；
常量yAxis=d3.axisLeft（）
.刻度（yScale）
.tickValues（yTickValues）
.tickFormat（d3.format（“.0f”）；
////////////////////////////////////////////////////////////
///////////////////////功能//////////////////////////
////////////////////////////////////////////////////////////
函数绘图（）{
//过渡参数
t=d3.transition（）
.持续时间（时间间隔）
.ease（d3.easeLinear）；
//更新xAxis量表
域（[date1，date2]）
.范围（[0，宽度]）；
//呼叫轴
attr（“变换”、“平移（0）”+（高度-边距.底部）+”）
.过渡（t）
.呼叫（xAxis）；
yAxisGroup.call（yAxis）；
//数据连接
var circles=g.selectAll（“circle”）。数据（测量值）；
//出口
circles.exit（）.remove（）；
//更新
//使用平滑的线性过渡更新屏幕上的DOM元素
圈子
.attr（“cx”，功能（d）{
返回xScale（d[0]）；
})
.attr（“cy”，函数（d）{
返回yScale（d[1]）；
});
//进入
圈。输入（）
.附加（“圆圈”）
.attr（“类”、“输入”）
.attr（“填充”、“黑色”）
.attr（“r”、“4”）
.attr（“cx”，功能（d）{
返回xScale（d[0]）；
})
.attr（“cy”，函数（d）{
返回yScale（d[1]）；
});
//为下一次迭代更新日期和随机数组
日期1+=时间间隔；
日期2+=时间间隔；
push（addNewMeasurement（））；
测量。移位（）；
};
函数initializeRandomArray（）{
对于（i=1；i，但非常接近）
var precision=（Math.random（）*2*precisionValue）-precisionValue；
温度[1]=精度值+精度；
//在数组末尾添加新元素
测量。推力（温度）；
日期1+=时间间隔；
}
//重置回日期1
date1=新日期（originalTime1）.getTime（）；
};
函数addNewMeasurement（）{
var-temp=[]；
温度[0]=日期2；
var precision=（Math.random（）*2*precisionValue）-precisionValue；
温度[1]=精度值+精度；
返回温度；
};
////////////////////////////////////////////////////////////
/////////////////////////主要/////////////////////////////
////////////////////////////////////////////////////////////
initializeRandomArray（）；
draw（）；
d3.区间（函数（）{
draw（）；
}，时间间隔）；

.x轴，
.y轴{
字号：0.8em；
笔划宽度：0.06em；
}
#图表{
宽度：600px；
高度：500px；
}

Bostock在这里介绍了这个问题，@SmokeyShakers非常感谢！！这非常有帮助！：）