d3.js mise à jour automatique en temps opportun via setInterval avec jQuery get (json, xml, text, peu importe)

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

  •  09-12-2019
  •  | 
  •  

Question

Quelqu'un peut-il m'aider sur la façon d'utiliser un jQuery obtenir(json, txt, xml, peu importe) et setInterval (d3.js) pour que je puisse mettre à jour mon graphique à barres d3 toutes les N secondes ?Ou est-ce que quelqu'un connaît un exemple qui utilise un RESTful obtenir mettre à jour les données via setInterval dans les SVG d3 ?j'ai lu ce tutoriel toute la journée, mais sans cliquer sur la façon d'incorporer json au lieu d'une marche aléatoire.Merci d'avance....

Ma tentative infructueuse :

        <!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>
Était-ce utile?

La solution

Les fonctions ajax de jQuery sont asynchrones, donc next1() ne renvoie rien.Tu veux:

  1. Créez votre tableau de données
  2. Charger de nouvelles données de manière asynchrone
  3. Lors du chargement des données, push() sur le tableau de données
  4. Redessinez votre graphique

Vous pouvez simuler cela sans appel JSON en procédant comme suit :

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

Et quand cela fonctionne, passez à ceci :

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

Un problème avec cela, cependant, est que si l'une des requêtes JSON prend plus d'une seconde, vous pourriez vous retrouver avec un chargement des données dans le désordre.Il est donc préférable d'utiliser setTimeout() et mettez en file d'attente le prochain chargement seulement après avoir terminé le précédent :

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

Cela a du sens ?

Licencié sous: CC-BY-SA avec attribution
Non affilié à StackOverflow
scroll top