Javascript 使用滑块缩放实时D3折线图

我有一个实时D3折线图，我正试图用jQueryUI滑块实时缩放它。缩放X轴以使其特定。这里有一个代码笔，最后还有一个片段。图表在这里滚动，包含随机数据，请看：

我确实有两个问题：

1移动滑块时，X轴本身按我希望的方式缩放。但实际绘制的线条比例不正确。我做错了什么

2当特定浏览器选项卡或窗口（如果只有一个选项卡）处于非活动状态时，页面在返回该选项卡时将无响应。例如，如果用户使用另一个选项卡浏览几分钟，则带有图表的整个选项卡将变得无响应，并且只有在长时间等待后才会再次响应。我应该如何处理整个背景的事情与这种实时图表与D3？你当然可以自己复制这个

关注JS。HTML非常简单，CSS也非常简单，就在这里举个例子

//D3图表 随机=d3.random.normal0.3； var n=500， 持续时间=50， now=新的DateDate.now-持续时间， 数据=d3.rangen.maprandom； var保证金=40； //从元素属性获取高度，否则设置默认值 变量高度=300-裕度*2； 变量宽度=$'.panel'.width-边距*2； var x=d3.time.scale .domain[now-n-2*持续时间，now-duration] .范围[0，宽度]； 变量y=d3.scale.linear .域[-1，1] .范围[高度，0]； var line=d3.svg.line 埃博拉病 .X功能正常，我{ 返回xnow-n-1-i*持续时间； } 1.我觉得我的功能正常{ 返回码； }; var svg=d3.selectchart.appendsvg .宽度，宽度+边距+边距 .attr高度，高度+边距+边距 .附录 .attransform，translate+margin+，+margin+； svg.appenddefs.appendclipPath .attrid，clip .appendrect .宽度，宽度 .身高,身高,； var yAxis=svg.appendg .属性类，y轴 .caly.axis=d3.svg.axis.scaley.tick5.ft； var xAxis=svg.appendg .attrclass，x轴 .attrtransform，translate0，+高度+ .callx.axis=d3.svg.axis.scalex.orientbottom； var path=svg.appendg .attrclip路径，urlclip .appendpath .datumdata .阶级，阶层 .attrd，行； var transition=d3。选择{}.transition .持续时间 .线性； 功能记号{ transition=transition.eachfunction{ //更新域 现在=新日期； x、 域[now-n-2*持续时间，now-duration]； //推送一个新的数据点 随机数据； //重新绘制线条，然后将其滑动到左侧 路径 .attrd，行 过渡 .attrtransform，translate+xnow-n-1*duration+； xAxis.callx.axis； //将旧数据点从前面弹出 数据转换； }.transition.eachstart，勾选； }; //X轴范围滑块 $document.readyfunction{ $function{ var图=d3.selectchart； $slider.slider{ 范围：分钟， 价值：750， 最低：200， 最高：2000， 幻灯片：functionevent，ui{ 旧n=n； n=ui.value； //更新域 现在=新日期； x、 域[now-n-2*持续时间，now-duration]； 路径 .attrd，行 过渡 .attransform，translate+xn-old_n+； } }; }; }; 身体{ 字体系列：无衬线； 填充：20px； } .小组{ 宽度：600px； } .轴线路径， .轴线{ 形状渲染：边缘清晰； } 线 线 路径{ 填充：无； 笔画宽度：1； 中风：000； } .滑块{ 最大宽度：300px； } 图表