d3.js atualização automática oportuna via setInterval com jQuery get (json, xml, text, qualquer que seja)
Pergunta
Alguém pode ajudar com como usar um jQuery pegar(json, txt, xml, qualquer que seja) e setInterval (d3.js) para que eu possa atualizar meu gráfico de barras d3 a cada N segundos?Ou alguém conhece um exemplo que usa um RESTful pegar atualizar dados por meio de setInterval em SVGs d3?Eu li esse tutorial o dia todo, mas sem clicar em como incorporar json em vez de passeio aleatório.Muito obrigado antecipadamente....
Minha tentativa malsucedida:
<!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>
Solução
As funções ajax do jQuery são assíncronas, então next1()
não está retornando nada.Você quer:
- Crie sua matriz de dados
- Carregar novos dados de forma assíncrona
- Ao carregar os dados,
push()
na matriz de dados - Redesenhe seu gráfico
Você pode simular isso sem uma chamada JSON fazendo o seguinte:
var data = [],
t = 0;
var interval = setInterval(function() {
var value = Math.random() * 100;
data.push({time: ++t, value: value});
redraw();
}, 1000);
E quando você fizer isso funcionar, mude para isto:
var data = [],
t = 0;
var interval = setInterval(function() {
$.getJSON("path/to/data.json", function(datum) {
data.push({time: ++t, value: datum});
redraw();
});
}, 1000);
Um problema com isso, porém, é que se alguma das solicitações JSON demorar mais de um segundo, você poderá acabar com o carregamento de dados fora de ordem.Então é melhor usar setTimeout()
e coloque o próximo carregamento na fila somente depois de terminar o anterior:
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();
Faz sentido?