d3.js は、jQuery get(json、xml、text など) を使用した setInterval を介したタイムリーな自動更新を行います。

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

  •  09-12-2019
  •  | 
  •  

質問

誰かjQueryの使い方を手伝ってくれませんか 得る(json、txt、xml など) と setInterval (d3.js) を使用すると、N 秒ごとに d3 棒グラフを更新できますか?それとも、RESTful を使用する例を知っている人はいますか? 得る d3 SVG の setInterval を通じてデータを更新するには?もう読んだ これ 一日中チュートリアルをやっていましたが、ランダム ウォークの代わりに 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>
役に立ちましたか？

解決

jQueryのajax関数は非同期なので、 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);

ただし、これには 1 つの問題があります。それは、JSON リクエストのいずれかが 1 秒以上かかる場合、データの読み込みが順番どおりに行われない可能性があることです。したがって、使用するのが最善です 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