d3.js 通过 setInterval 和 jQuery get(json、xml、text 等) 及时自动更新

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

不过，这样做的一个问题是，如果任何 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