任何人都可以帮助如何使用jQuery get(json,txt,xml,无论如何)和setInterval(d3.js),以便我可以每N秒更新一次d3条形图？或者有没有人知道在d3 SVG 中使用RESTful get通过setInterval更新数据的示例？我整天都读过这个教程,但没有点击如何合并json而不是随机游走.提前谢谢了....
我不成功的尝试:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8">
<title> Testing a d3.js Walking Bar Chart via jQuery getText and d3.js setInterval </title>
<script type="text/javascript" src="http://localhost:8080/dev_tests/d3/d3.js"></script>
<script type="text/javascript" src="http://localhost:8080/dev_tests/latest.jquery/jquery-latest.js"></script>
</head>
<body>
<div class="body">
<div class="content">
<style type='text/css'>
.chart {
margin-left: 42px;
}
.chart rect {
fill: steelblue;
stroke: white;
}
</style>
<script type='text/javascript'>
var t = 1297110663,
v = 70,
data = d3.range(33).map(next1);
function next1() {
$.get('http://localhost:8080/dev_tests/data/file.txt', function(data1) {
$('.result').text(data1);
alert(data1);
return {time: ++t, value: v = data1 };
});
}
var w = 20,
h = 80;
var x = d3.scale.linear()
.domain([0, 1])
.range([0, w]);
var y = d3.scale.linear()
.domain([0, 100])
.rangeRound([0, h]);
</script>
<p>Et voila!</p>
<script type='text/javascript'>
var chart3 = d3.select(".content").append("svg")
.attr("class", "chart")
.attr("width", w * data.length - 1)
.attr("height", h);
chart3.append("line")
.attr("x1", 0)
.attr("x2", w * data.length)
.attr("y1", h - .5)
.attr("y2", h - .5)
.style("stroke", "#000");
redraw3();
function redraw3() {
var rect = chart3.selectAll("rect")
.data(data, function(d) { return d.time; });
rect.enter().insert("rect", "line")
.attr("x", function(d, i) { return x(i + 1) - .5; })
.attr("y", function(d) { return h - y(d.value) - .5; })
.attr("width", w)
.attr("height", function(d) { return y(d.value); })
.transition()
.duration(1000)
.attr("x", function(d, i) { return x(i) - .5; });
rect.transition()
.duration(1000)
.attr("x", function(d, i) { return x(i) - .5; });
rect.exit().transition()
.duration(1000)
.attr("x", function(d, i) { return x(i - 1) - .5; })
.remove();
}
setInterval(function() {
data.shift();
data.push(data);
redraw3();
}, 3500);
</script>
</div>
</div>
</body>
</html>
jQuery的ajax函数是异步的,因此next1()不会返回任何内容.你想要:
push()它将进入数据阵列您可以通过执行以下操作在没有JSON调用的情况下模拟此操作:
var data = [],
t = 0;
var interval = setInterval(function() {
var value = Math.random() * 100;
data.push({time: ++t, value: value});
redraw();
}, 1000);
当你开始工作时,切换到:
var data = [],
t = 0;
var interval = setInterval(function() {
$.getJSON("path/to/data.json", function(datum) {
data.push({time: ++t, value: datum});
redraw();
});
}, 1000);
但是,这样做的一个问题是,如果任何JSON请求花费的时间超过一秒,那么最终可能会导致数据无序加载.因此,setTimeout()只有在完成上一个加载后才能使用和排队下一个加载:
var data = [],
t = 0,
timeout;
function loadNext() {
$.getJSON("path/to/data.json", function(datum) {
data.push({time: ++t, value: datum});
redraw();
timeout = setTimeout(loadNext, 1000);
});
}
loadNext();
合理？