D3实时图形显示:由于数据长度超出限制，无法从右移数据和右移数据滑动 - javascript

后端使用usign bottle webframework，前端使用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)

和问题toAskFromStackoverflow.html的内容如下

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>
<!DOCTYPE html>
<meta charset="utf-8">
<style>

svg {
  font: 10px sans-serif;
}

.line {
  fill: none;
  stroke: #000;
  stroke-width: 1.5px;
}

.axis path,
.axis line {
  fill: none;
  stroke: #000;
  shape-rendering: crispEdges;
}

</style>
<body>
    <form id="startBtn">
            <input type="submit" value="Start Real" />
    </form>
<div id = "graph1"></div>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script>
<script>
        var margin = {top:5, right: 10, bottom: 10, left: 70},
            width = 1200 - margin.left - margin.right,
            height = 250 - margin.top - margin.bottom;

        var data1;
        var x,y1,xAxis1,yAxis1,update;
        var duration = 1000;
	var moveDuration = 1000;
        // Parse the date / time
                var totalSeconds = 60;
                var n = 10;//totalSeconds;
		var limit = n;
                duration = 1000;
                x = d3.time.scale()
                           .domain([0, ((n - 1) * duration)])
                           .range([0, width]);
        var valueline1 = d3.svg.line()
                .x(function(d,i) { return x(i*duration); })
                .y(function(d,i) { return y1(d); })
                .interpolate("monotone");

   // Set the ranges
                data1 = [0];
                

                y1 = d3.scale.linear().range([height, 0])
                                        .domain([0,1000]);
               xAxis1 =d3.svg.axis().scale(x)
                                .orient("bottom")
                                .ticks(d3.time.seconds, 1.0)
                                .tickFormat(d3.time.format('%M:%S'))
                                .innerTickSize(-height);
                yAxis1 = d3.svg.axis().scale(y1)
                        .innerTickSize(-width)
                        .outerTickSize(0)
                        .tickPadding(10)
                        .orient("left").ticks(10);
 		var svg = d3.select("#graph1")
                        .append("svg")
                        .attr("width", width + margin.left + margin.right)
                        .attr("height", height + margin.top + margin.bottom)
                        .append("g")
                        .attr("transform","translate(" + margin.left + "," + margin.top + ")");
               svg.append("defs").append("clipPath")
		    .attr("id", "clip")
		    .append("rect")
		    .attr("width", width)
		    .attr("height", height); 
                
		var xAxisLine= svg.append("g")                     // Add the X Axis
                        .attr("class", "x axis")
                        .attr("transform", "translate("+width+"," + height + ")")
                        .call(xAxis1);
		
		svg.append("g")                     // Add the Y Axis
                        .attr("class", "y axis")
                        .call(yAxis1);

                var path = svg.append("g")
                                .attr("clip-path","url(#clip)")
                                .append("path")
                                .data(data1)
                                .attr("class", "line")
                                .attr("transform", "translate(" + (width )+")")
				.attr("d",valueline1(data1))
				;          // Add the valueline path.


	var random = d3.random.normal(0, 50);
	var  i = 0;
	var shifter = 0;
       function update(val){
                var svg1 = d3.select("#graph1");
                i = i + 1;
                shifter = 0;
                var val = JSON.parse(val);
               	data1.push(val); 

                if(i >= limit){
                        shifter = x(-duration);
                        var x_axis_scale = d3.time.scale()
                                                .domain([(i+1-limit)*duration,((n-1+(i+1-limit))*duration)])
                                                .range([0,width]);

                        svg1.select(".x.axis")
				.attr("transition",null)
                                .transition()
                                .duration(moveDuration)
                                .ease("linear")
					.call(d3.svg.axis().scale(x_axis_scale)
					.orient("bottom")
                                	.ticks(d3.time.seconds, 1.0)
                                	.tickFormat(d3.time.format('%M:%S'))
                                	.innerTickSize(-height)
                                        //.orient("bottom")
					//.ticks(d3.time.seconds,1.0)
					//.tickFormat(d3.time.format('%M:%S'))
					//.innerTickSize(-height)
				);

                                //.attr("width",width)
				path//.attr("transform",null)
                                .attr("d", valueline1(data1))
				.attr("transform",null)
				.transition()
                                .duration(moveDuration)
                                .ease("linear")
                                .attr("transform","translate("+(shifter)+")")
                                //.transition()
                                //.duration(moveDuration)
                                //.ease("linear")
                                ;//.attr("transform","translate("+(shifter-x(-duration))+")");

                        data1.shift();
                        // Make the changes
                }
                else{
                        shifter = width - x(i*duration);
                        svg1.select(".x.axis")
			
                                .transition()
                                .duration(moveDuration)
                                .ease("linear")
                                .attr("transform","translate("+(shifter)+","+(height)+")");
                        
		//	svg1.select(".line")   // change the line
                  path              .attr("d", valueline1(data1))
                                .transition()
                                .duration(moveDuration)
                                .ease("linear")
                                .attr("transform","translate("+(shifter)+")")
                                ;//.attr("transform","translate("+(shifter)+")");

                        // Make the changes
                        }

        }
var  ws = new WebSocket('ws://127.0.0.1:8004/websocket')
ws.onopen = function(evt) {
}

ws.onmessage = function(evt) {
	//alert(evt.data)       
	update(evt.data);
	ws.send("arrived");
}
$('#startBtn').submit(function() {
	ws.send("Pressed");
});

</script>

当我在终端上运行server.py并在i超出限制后打开localhost：8004时，经过10秒后，路径的流动不如超出限制前那么平滑。我搜索的解决方案不知道是什么问题？我认为这可能是在现有过渡的基础上增加新的过渡。但是事实并非如此，即使我在updtae功能的其他部分禁用了所有与转换相关的行，但是如果更新功能的一部分仍未包含转换。如果您能帮助我解决这个问题，我将非常高兴。

参考方案

这很奇怪，您的代码应该可以工作。就像d3没有拿起transition.attr并应用它。最好的选择是设置自己的插值器：

var startTrans = 'translate(0,0)';
var endTrans = 'translate(' + (-x(duration)) + ',0)';
var transInterp = d3.interpolateString(startTrans , endTrans); 
...
path 
  .attr("d", valueline1(data1))
  .attr("transform", null)
  .transition()
  .duration(moveDuration)
  .ease("linear")
  .attrTween('transform', function (d) {
    return transInterp;
  });

完整的工作代码：

<!DOCTYPE html>
<meta charset="utf-8">
<style>
  svg {
    font: 10px sans-serif;
  }
  
  .line {
    fill: none;
    stroke: #000;
    stroke-width: 1.5px;
  }
  
  .axis path,
  .axis line {
    fill: none;
    stroke: #000;
    shape-rendering: crispEdges;
  }
</style>

<body>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>
  <div id="graph1"></div>
  <script type="text/javascript" src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script>
  <script>
  
    var margin = {
        top: 5,
        right: 10,
        bottom: 10,
        left: 70
      },
      width = 600 - margin.left - margin.right,
      height = 250 - margin.top - margin.bottom;

    var data1;
    var x, y1, xAxis1, yAxis1, update;
    var duration = 1000;
    var moveDuration = 1000;
    // Parse the date / time
    var totalSeconds = 60;
    var n = 10; //totalSeconds;
    var limit = n;
    duration = 1000;
    x = d3.time.scale()
      .domain([0, ((n - 1) * duration)])
      .range([0, width]);
    var valueline1 = d3.svg.line()
      .x(function(d, i) {
        return x(i * duration);
      })
      .y(function(d, i) {
        return y1(d);
      })
      .interpolate("monotone");

    // Set the ranges
    data1 = [0];


    y1 = d3.scale.linear().range([height, 0])
      .domain([0, 1000]);
    xAxis1 = d3.svg.axis().scale(x)
      .orient("bottom")
      .ticks(d3.time.seconds, 1.0)
      .tickFormat(d3.time.format('%M:%S'))
      .innerTickSize(-height);
    yAxis1 = d3.svg.axis().scale(y1)
      .innerTickSize(-width)
      .outerTickSize(0)
      .tickPadding(10)
      .orient("left").ticks(10);
    var svg = d3.select("#graph1")
      .append("svg")
      .attr("width", width + margin.left + margin.right)
      .attr("height", height + margin.top + margin.bottom)
      .append("g")
      .attr("transform", "translate(" + margin.left + "," + margin.top + ")");
    svg.append("defs").append("clipPath")
      .attr("id", "clip")
      .append("rect")
      .attr("width", width)
      .attr("height", height);

    var xAxisLine = svg.append("g") // Add the X Axis
      .attr("class", "x axis")
      .attr("transform", "translate(" + width + "," + height + ")")
      .call(xAxis1);

    svg.append("g") // Add the Y Axis
      .attr("class", "y axis")
      .call(yAxis1);

    var path = svg.append("g")
      .attr("clip-path", "url(#clip)")
      .append("path")
      .data(data1)
      .attr("class", "line")
      .attr("transform", "translate(" + (width) + ")")
      .attr("d", valueline1(data1)); // Add the valueline path.


    var random = d3.random.normal(0, 50);
    var i = 0;
    var shifter = 0;
    var startTrans = 'translate(0,0)';
    var endTrans = 'translate(' + (-x(duration)) + ',0)';
    var transInterp = d3.interpolateString(startTrans, endTrans);

    function update(val) {
      var svg1 = d3.select("#graph1");
      i = i + 1;
      shifter = 0;
      var val = JSON.parse(val);
      data1.push(val);

      if (i >= limit) {
        shifter = x(-duration);
        var x_axis_scale = d3.time.scale()
          .domain([(i + 1 - limit) * duration, ((n - 1 + (i + 1 - limit)) * duration)])
          .range([0, width]);

        svg1.select(".x.axis")
          .attr("transition", null)
          .transition()
          .duration(moveDuration)
          .ease("linear")
          .call(d3.svg.axis().scale(x_axis_scale)
            .orient("bottom")
            .ticks(d3.time.seconds, 1.0)
            .tickFormat(d3.time.format('%M:%S'))
            .innerTickSize(-height)
            //.orient("bottom")
            //.ticks(d3.time.seconds,1.0)
            //.tickFormat(d3.time.format('%M:%S'))
            //.innerTickSize(-height)
          );

        
        path 
          .attr("d", valueline1(data1))
          .attr("transform", null)
          .transition()
          .duration(moveDuration)
          .ease("linear")
          .attrTween('transform', function (d) {
            return transInterp;
          });

        data1.shift();
        // Make the changes
      } else {
        shifter = width - x(i * duration);
        svg1.select(".x.axis")

        .transition()
          .duration(moveDuration)
          .ease("linear")
          .attr("transform", "translate(" + (shifter) + "," + (height) + ")");

        //	svg1.select(".line")   // change the line
        path.attr("d", valueline1(data1))
          .transition()
          .duration(moveDuration)
          .ease("linear")
          .attr("transform", "translate(" + (shifter) + ")"); //.attr("transform","translate("+(shifter)+")");

        // Make the changes
      }

    }

    setInterval(function() {
      update(Math.random() * 1000);
    }, 1000);
  </script>

如何在没有for循环的情况下在Javascript中使用Django模板标签 - javascript

我想在JavaScript中使用模板变量：我的问题是在javascript代码中使用for循环，for循环之间的所有事情都会重复..但我不想要....下面粘贴了我的代码..有人可以告诉我更好的方法吗这..因为这看起来很丑..这是我的代码： {% block extra_javascript %} <script src="/static/js…

Javascript-从当前网址中删除查询字符串 - javascript

单击提交按钮后，我需要从网址中删除查询字符串值。我可以用jQuery做到这一点吗？当前网址：siteUrl/page.php?key=value 页面提交后：siteUrl/page.php 实际上，我已经从另一个带有查询字符串的页面着陆到当前页面。我需要在页面首次加载时查询字符串值以预填充一些详细信息。但是，一旦我提交了表格，我就需要删除查询字符串值。我已…

在JavaScript函数中转义引号 - javascript

我正在尝试将变量传递给javascript函数。根据用户的选择，它可以是文本或图像。这里已经讨论了类似的问题，但我无法解决。在php中，我这样编码：if ($choice == 1) { $img = '<img src = "../folder/'.$_SESSION["img"].'�…

打印二维阵列 - javascript

我正在尝试打印子元素。在this example之后。怎么做？。$myarray = array("DO"=>array('IDEAS','BRANDS','CREATIVE','CAMPAIGNS'), "JOCKEY"=>a…

使用JS和PHP更改弹出窗口背景图像 - javascript

我有一个JS函数：function zoom(now) { document.getElementById("popup").style.display = "block"; document.getElementById("photos").style.backgroundImage = …

推荐标签：, , ,

腾讯的同事天天给我安利让我看《三体》，说马化腾和雷军也在…

腾讯的同事天天给我安利让我看《三体》，说马化腾和雷军也在看。自己强行看了两个月，全部给看完了。感觉这文笔也就我读初中的水平……而且写着国内的一些情况，外国人能理解吗？这书为什么会这么火？这水平我也可以去写呀[笑哭][笑哭][笑哭] 招商银行员工：可以写赶紧写一个啊，能拿科幻文学雨果奖。 包清白：哦 楼主：pei ！tui ！你也配姓龙 楼主：@赵龙王 呵呵 […]