Своевременное автоматическое обновление d3.js через setInterval с помощью jQuery get(json, xml, text и т. д.)
Вопрос
Может ли кто-нибудь помочь с использованием jQuery? получать(json, txt, xml, что угодно) и setInterval (d3.js), чтобы я мог обновлять гистограмму d3 каждые N секунд?Или кто-нибудь знает пример, в котором используется RESTful? получать обновить данные через setInterval в SVG d3?я прочел этот учебник весь день, но не понимаю, как включить 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>
Решение
Функции ajax jQuery являются асинхронными, поэтому 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();
Имеет смысл?