d3.js atualização automática oportuna via setInterval com jQuery get (json, xml, text, qualquer que seja)

StackOverflow https://stackoverflow.com//questions/9611303

  •  09-12-2019
  •  | 
  •  

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>
Foi útil?

Solução

As funções ajax do jQuery são assíncronas, então next1() não está retornando nada.Você quer:

  1. Crie sua matriz de dados
  2. Carregar novos dados de forma assíncrona
  3. Ao carregar os dados, push() na matriz de dados
  4. 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?

Licenciado em: CC-BY-SA com atribuição
Não afiliado a StackOverflow
scroll top