Json D3.js使用实时数据进行动态转换

长期潜伏者，热衷于学习D3！不管怎样，我正在努力学习博斯托克先生的例子

现在，我有一把小提琴，它工作得非常好-它很平滑，更新很快，可以很好地缩放x轴和y轴

这是我正在尝试处理的时间序列图。基本上，我将传感器整数放入JSON数组。我的目标是实时接收这些数据；传感器发送一个温度，我几乎实时地在图表上得到数据的平滑反映。这就是问题所在。只要我加入JSON抓取代码，一切都会从像黄油一样平滑变为波涛汹涌和疯狂。这是我的工作内容。。。请理解，我对D3非常陌生

下面是以我想要的方式显示图形的随机代码：

var n=40，
持续时间=750，
now=新日期（Date.now（）-持续时间），
随机=d3.随机.正常（0,0.2），
计数=0，
数据=d3.范围（n）.地图（随机）；
var保证金={
前20名，
右:20,，
底数：20，
左：40
},
宽度=500-边距。左侧-边距。右侧，
高度=300-margin.top-margin.bottom；
var x=d3.time.scale（）
.domain（[现在-（n-2）*持续时间，现在-持续时间]）
.范围（[0，宽度]）；
变量y=d3.scale.linear（）
.domain（[0，d3.max（数据）]）
.范围（[高度，0]）；
var line=d3.svg.line（）
.插入（“基础”）
.x（功能（d，i）{
返回x（现在-（n-1-i）*持续时间）；
})
.y（功能（d，i）{
返回y（d）；
});
var svg=d3.选择（“正文”）.追加（“svg”）
.attr（“宽度”，宽度+边距。左侧+边距。右侧）
.attr（“高度”，高度+边距。顶部+边距。底部）
.附加（“g”）
.attr（“转换”、“平移”（+margin.left+）、“+margin.top+”）；
svg.append（“defs”）.append（“clipPath”）
.attr（“id”、“剪辑”）
.append（“rect”）
.attr（“宽度”，宽度）
.attr（“高度”，高度）；
var axis=svg.append（“g”）
.attr（“类”、“x轴”）
.attr（“变换”、“平移（0）”、“高度+”）
.call（x.axis=d3.svg.axis（）.scale（x.orient（“底部”））；
var yAx=svg.append（“g”）
.attr（“类”、“y轴”）
.call（y.axis=d3.svg.axis（）.scale（y.orient（“left”））；
var path=svg.append（“g”）
.attr（“剪辑路径”、“url（#剪辑）”）
.append（“路径”）
.基准（数据）
.attr（“类”、“行”）；
var transition=d3.select（{}）.transition（）
.持续时间（750）
.ease（“线性”）；
勾选（）；
函数tick（）{
转换=转换。每个（函数（）{
//更新域
现在=新日期（）；
x、 域（[现在-（n-2）*持续时间，现在-持续时间]；
y、 域（[0，d3.max（数据）+10]）；
//将新的数据点推到后面
data.push（20+Math.random（）*100）；
//重新绘制线条，并将其滑动到左侧
path.attr（“d”，行）
.attr（“转换”，空）；
//向左滑动x轴，重新缩放y轴
axis.call（x.axis）；
yAx.call（y轴）；
//把线滑到左边
path.transition（）
.attr（“转换”、“转换”（+x（现在为-（n-1）*持续时间）+”）；
//将旧数据点从前面弹出
data.shift（）；
}).transition（）。每个（“开始”，勾选）；
}

svg{
字体：10px无衬线；
}
.线路{
填充：无；
笔画：橙色；
笔划宽度：1.5px；
}
.轴路径，.轴线{
填充：无；
行程：#000；
形状渲染：边缘清晰；
}