D3.js Aggiornamento automatico tempestivo tramite SetInterval con JQuery Get (JSON, XML, testo, qualsiasi cosa)

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

  •  09-12-2019
  •  | 
  •  

Domanda

Qualcuno può aiutare con come utilizzare un jQuery ottenere (json, txt, xml, qualsiasi cosa) e setinterval (d3.js) in modo che possa aggiornare il mio grafico a barre D3 ogni n secondi? Oppure qualcuno sa di un esempio là fuori che usa un RESTICGUS Ottieni per aggiornare i dati tramite SetInterval in D3 SVGS? Ho letto questo tutorial tutto il giorno, ma non cliccando con comeincorporare JSON invece di camminata casuale. Molte grazie in anticipo ....

Il mio tentativo infruttuoso: 

        <!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>
.

È stato utile?

Soluzione

Le funzioni AJAX JQuery sono asincroni, quindi next1() non restituisce nulla.Vuoi:

    .
  1. Crea il tuo array di dati
  2. carica nuovi dati asincronilmente
  3. Al momento del caricamento dei dati, push() sugli array di dati
  4. Redraw il tuo grafico

    Puoi simulare questo senza una chiamata JSON facendo questo: 

    var data = [],
    t = 0;
var interval = setInterval(function() {
    var value = Math.random() * 100;
    data.push({time: ++t, value: value});
    redraw();
}, 1000);
    .

    E quando si ottiene quel funzionamento, passa a questo: 

    var data = [],
    t = 0;
var interval = setInterval(function() {
    $.getJSON("path/to/data.json", function(datum) {
        data.push({time: ++t, value: datum});
        redraw();
    });
}, 1000);
    .

    Un problema con questo, però, è che se una qualsiasi delle richieste JSON richiede più tempo di un secondo è possibile concludere con il caricamento dei dati fuori dall'ordine.Quindi è meglio usare setTimeout() e coda sul caricamento successivo solo dopo averlo fatto con quello precedente: 

    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();
    .

    ha senso?

Autorizzato sotto: CC-BY-SA insieme a attribuzione
Non affiliato a StackOverflow
scroll top