Javascript D3实时绘图：从右侧滑动&；数据长度超过限制时的移位数据转换不起作用

后端使用Web框架，前端使用d3图形。 我的server.py内容如下

from bottle import get,template,run,route,Bottle,static_file
from bottle.ext.websocket import GeventWebSocketServer
from bottle.ext.websocket import websocket
import random
import time
users = set()
@get('/')
def mainIndex():
    return template('problemToAskFromStackoverflow')

import time
@get('/websocket', apply=[websocket])
def chat(ws):
      users.add(ws)
      startTime = 0#time.time()
      while True:
          msg = ws.receive()
          #print "msg ",msg
          if msg is not None:
               for u in users:
                   speed = random.randrange(0,1000)
                   weight = random.randrange(0,50)
                   #elapsedTime = time.time() - startTime
                   startTime += 1
                   print "time:",startTime
                  obj = '{"speed":'+str(speed) +    ',"weight":'+str(weight)+',"time":'+str(startTime)+'}'
                  u.send(str(speed))
                  #u.send(str(random.randrange(0,1000)))
            else:
                 print "msg is NONe is guesse"
                 break
           time.sleep(1)
   users.remove(ws)

run(host='localhost',port=8004,server=GeventWebSocketServer)

problemToAskFromStackoverflow.html的内容如下

from bottle import get,template,run,route,Bottle,static_file
from bottle.ext.websocket import GeventWebSocketServer
from bottle.ext.websocket import websocket
import random
import time
users = set()
@get('/')
def mainIndex():
    return template('problemToAskFromStackoverflow')

import time
@get('/websocket', apply=[websocket])
def chat(ws):
      users.add(ws)
      startTime = 0#time.time()
      while True:
          msg = ws.receive()
          #print "msg ",msg
          if msg is not None:
               for u in users:
                   speed = random.randrange(0,1000)
                   weight = random.randrange(0,50)
                   #elapsedTime = time.time() - startTime
                   startTime += 1
                   print "time:",startTime
                  obj = '{"speed":'+str(speed) +    ',"weight":'+str(weight)+',"time":'+str(startTime)+'}'
                  u.send(str(speed))
                  #u.send(str(random.randrange(0,1000)))
            else:
                 print "msg is NONe is guesse"
                 break
           time.sleep(1)
   users.remove(ws)

run(host='localhost',port=8004,server=GeventWebSocketServer)

svg{
字体：10px无衬线；
}
.线路{
填充：无；
行程：#000；
笔划宽度：1.5px；
}
.轴线路径，
.轴线{
填充：无；
行程：#000；
形状渲染：边缘清晰；
}
var margin={顶部：5，右侧：10，底部：10，左侧：70}，
宽度=1200-margin.left-margin.right，
高度=250-margin.top-margin.bottom；
var数据1；
变量x，y1，xAxis1，yAxis1，更新；
var持续时间=1000；
var-moveDuration=1000；
//解析日期/时间
var totalSeconds=60；
var n=10//总秒数；
var极限=n；
持续时间=1000；
x=d3.time.scale（）
.domain（[0，（（n-1）*持续时间）]）
.范围（[0，宽度]）；
var valueline1=d3.svg.line（）
.x（函数（d，i）{返回x（i*持续时间）；}）
.y（函数（d，i）{返回y1（d）；}）
.插入（“单调”）；
//设定范围
数据1=[0]；
y1=d3.刻度.线性（）.范围（[高度，0]）
.域名（[01000]）；
xAxis1=d3.svg.axis（）.scale（x）
.orient（“底部”）
.滴答声（d3.time.seconds，1.0）
.tickFormat（d3.time.format（“%M:%S”））
.尺寸（-高度）；
yAxis1=d3.svg.axis（）.scale（y1）
.innerTickSize（-宽度）
.outerTickSize（0）
.1（10）
.方向（“左”）。刻度（10）；
var svg=d3。选择（“图1”）
.append（“svg”）
.attr（“宽度”，宽度+边距。左侧+边距。右侧）
.attr（“高度”，高度+边距。顶部+边距。底部）
.附加（“g”）
.attr（“转换”、“平移”（+margin.left+）、“+margin.top+”）；
svg.append（“defs”）.append（“clipPath”）
.attr（“id”、“剪辑”）
.append（“rect”）
.attr（“宽度”，宽度）
.attr（“高度”，高度）；
var xAxisLine=svg.append（“g”）//添加X轴
.attr（“类”、“x轴”）
.attr（“变换”、“平移”（“+width+”，“+height+”））
.call（xAxis1）；
svg.append（“g”）//添加Y轴
.attr（“类”、“y轴”）
.呼叫（yAxis1）；
var path=svg.append（“g”）
.attr（“剪辑路径”、“url（#剪辑）”）
.append（“路径”）
.数据（数据1）
.attr（“类”、“行”）
.attr（“变换”、“平移”（+（宽度）+”）
.attr（“d”，valueline1（数据1））
;          // 添加valueline路径。
var random=d3.随机.正常（0,50）；
var i=0；
var移位器=0；
功能更新（val）{
var svg1=d3。选择（“图1”）；
i=i+1；
移位器=0；
var val=JSON.parse（val）；
数据1.推送（val）；
如果（i>=限制）{
移位器=x（-持续时间）；
变量x_轴_刻度=d3.time.scale（）
.domain（[（i+1-限制）*持续时间，（（n-1+（i+1-限制））*持续时间）]）
.范围（[0，宽度]）；
svg1.选择（“x轴”）
.attr（“转换”，null）
.transition（）
.持续时间（移动持续时间）
.ease（“线性”）
.call（d3.svg.axis（）.scale（x\u axis\u scale）
.orient（“底部”）
.滴答声（d3.time.seconds，1.0）
.tickFormat（d3.time.format（“%M:%S”））
.1尺寸（高度）
//.orient（“底部”）
//.滴答声（d3.时间.秒，1.0）
//.tickFormat（d3.time.format（“%M:%S”））
//.1尺寸（高度）
);
//.attr（“宽度”，宽度）
path/.attr（“转换”，null）
.attr（“d”，valueline1（数据1））
.attr（“转换”，null）
.transition（）
.持续时间（移动持续时间）
.ease（“线性”）
.attr（“变换”、“平移”（+（移位器）+”）
//.transition（）
//.持续时间（移动持续时间）
//.ease（“线性”）
；//.attr（“变换”、“平移”（+（移位器-x（-duration））+））；
data1.shift（）；
//做出改变
}
否则{
移位器=宽度-x（i*持续时间）；
svg1.选择（“x轴”）
.transition（）
.持续时间（移动持续时间）
.ease（“线性”）
.attr（“变换”、“平移”（+（移位器）+）、“+（高度）+”）；
//svg1.选择（“.line”）//更改行
path.attr（“d”，valueline1（数据1））
.transition（）
.持续时间（移动持续时间）
.ease（“线性”）