التحديث التلقائي لـ d3.js في الوقت المناسب عبر setInterval باستخدام jQuery get(json، xml، text، أيًا كان)

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

  •  09-12-2019
  •  | 
  •  

سؤال

يمكن لأي شخص أن يساعد في كيفية استخدام jQuery يحصل(json، txt، xml، أيًا كان) وsetInterval (d3.js) حتى أتمكن من تحديث المخطط الشريطي d3 الخاص بي كل N ثانية؟أو هل يعرف أي شخص مثالاً يستخدم RESTful يحصل لتحديث البيانات من خلال setInterval في d3 SVGs؟أنا قد قرأت هذا البرنامج التعليمي طوال اليوم، ولكن لا تنقر على كيفية دمج 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() لا يعود أي شيء.اتريد:

  1. قم بإنشاء مجموعة البيانات الخاصة بك
  2. تحميل البيانات الجديدة بشكل غير متزامن
  3. عند تحميل البيانات، push() عليه على مجموعة البيانات
  4. أعد رسم الرسم البياني الخاص بك

يمكنك محاكاة ذلك بدون استدعاء 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();

منطقي؟

مرخصة بموجب: CC-BY-SA مع الإسناد
لا تنتمي إلى StackOverflow
scroll top