个人中心
文章发布
退出
作者热门文章
- html - 出于某种原因，IE8 对我的 Sass 文件中继承的 html5 CSS 不友好？
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景？
25
4
使用 Bottle 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)
问题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 并在超出限制后打开 localhost:8004 时，10 秒后，路径不再像超出限制之前那样顺畅。我搜索了解决方案无法弄清楚问题是什么？我认为它可能会在现有过渡的基础上附加新的过渡。但事实并非如此，即使我禁用了更新功能的其他部分中的所有与转换相关的行，如果更新功能的一部分仍然没有转换。如果您能帮我解决这个问题，我将非常高兴。
最佳答案
这很奇怪，你的代码应该可以工作。就像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>关于javascript - D3实时绘图: slide from right&shift data as data length exceeds limit transition is not working，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/33438254/
25
4
0
我嵌套了 ul li 列表 > dentry > 隔离 Material 活髓剂 eclipse 刻剂 > dentry 矫正 > dentry 药品 > 口服 使用下面的 html De
我查看了一些关于 fragment 之间的动画交易的教程。我已经将这种方法用于动画并且效果很好: fragmentTransaction.setCustomAnimations(android.R.a
我有面板。我希望面板主体在单击面板标题的加号图标时向下滑动和向上滑动。 我不会使用 jquery。我必须使用纯 CSS3 来完成。 我正在使用 Angular 2 来处理条件。 .slide_down
我正在使用周期 2 ( http://jquery.malsup.com/cycle2/ ) 创建轮播，但我无法弄清楚如何通过“幻灯片编号”访问幻灯片。 我可以使用cycle.API循环遍历幻灯片数组
我是记者和官员软件包的狂热用户，目前正试图过渡到官员的 Powerpoint 工作流程。我正在使用包含幻灯片编号占位符的幻灯片模板。 使用 Reporters 时，我可以使用 doc % add_
已关闭。此问题不符合Stack Overflow guidelines 。目前不接受答案。 这个问题似乎不是关于 a specific programming problem, a software
如何仅在第一张幻灯片上隐藏 ion slide pager？我的代码是这样的: ABC BCD 所以我有 2 张幻灯片，但只有一个标签。 谢谢 最佳答案 你可以使用
(对不起我的英语) 我在使用 Google Slides API 时遇到问题。使用 Google Slides API 创建新演示文稿时如何选择主题？ 谢谢。 1.创建演示文稿 functio
有没有办法通过 rest API 更改 Google Slides 表格的表格单元格填充属性？ 更新表格单元格属性似乎没有任何单元格填充属性 最佳答案 虽然不完全相同，但可以通过设置单元格文本段落缩进
我尝试让 ion-slide-box 从某个索引开始。 幻灯片 Controller : $ionicSlideBoxDelegate.slide(index); 滑动框温度: ... 这行不通。可能
我有一个看起来像这样的 slider : $('#slider').cycle({ fx: 'scrollHorz', speed: 1250, timeout: 5000,
我一直在剖析 firebug 中的事件和 ui 对象，但它似乎没有任何我可以使用的东西。我错过了什么吗？我想我可以跟踪值的变化，但这似乎是一种困惑。 $(".selector").slider({
我正在构建一个无限的 jQuery 轮播。无限是它在向用户显示最终幻灯片后立即显示第一张幻灯片。为此，我在完成后回调函数中做了这个小调整 $('#slide li:last').after('#sli
我在顶部菜单(ListItems)的开头插入一个菜单选项并使用 $('#newMenuItem').show('slide'); 成功了。但是，我不喜欢它从左上角滑入的方式，所以我将其更改为 $('#
我正在尝试创建新的 4:3 演示文稿，而不是 16:9。 我阅读了此引用文献并编写了一些 ruby 代码，但它不起作用。新演示文稿的高度与我指定的高度不同。 Method: presentatio
我有一个数组，我正在尝试使用其中的信息来创建 Google 幻灯片演示文稿。我需要一些帮助，如果可能的话，还需要一些我可以阅读的 Material ，以便更好地理解这些问题的可能解决方案。 数组如下:
我有一个没有指示器按钮的 Twitter Bootstrap 3 旋转木马。我没有使用那些指示器按钮，而是使用选项卡(我在我的 CSS 中相应地设置了样式)。这样，用户就知道每张幻灯片是什么(基于选项
在我的页面上，我有一个用于图像的 ion-slide-box。由于在我的应用程序中用户将能够嵌入视频，因此我还应该将带有视频的 iframe 添加到同一个 slider 。这就是我的代码现在的样子:
我正在开发全屏 Bootstrap 4 轮播。幻灯片不包含图像，而是包含视频 和标题。 我的目的是将幻灯片的标题放在事件幻灯片的左侧和右侧，在 slider 控件之上，给人以标题被用作控件的印象。所需
这是我遇到问题的特定 View 的 Controller 。 .controller('MenuCtrl', ['$rootScope','$scope','$state','$timeout','$
我是一名优秀的程序员,十分优秀！