Question

TLDR：为什么页面更新前会有暂停，导致图表中出现小的空白？

http://jsbin.com/ABoLaya/1

我最近发现了立体主义，并被吹走了。所以我决定我的覆盆子pi可以使用一些监控。我也是javascript和所有与网络相关的东西的新手，所以请耐心等待。

我自己的数据源由redis数据库和webdis组成，我用它来获取json格式的数据。在redis中，我每秒都存储时间戳和值（时间戳：值）的组合，在我的示例中是使用的物理内存。

所以当我像这样查询webdis时：

http://192.168.0.3:7379/zrangebyscore/used_phymem/1382269532/1382269532

我回复了这个：{"zrangebyscore":["435265536:1382269532"]}

所以这部分工作得很好。在另一个关于stackoverflow的答案中，Mike Bostock解释了Cubism如何查询数据：Using Other Data Sources for cubism.js。简而言之，对1440个数据点（整个窗口）进行初始查询，之后仅查询最后7个数据点。我在我的代码中记录了Cubism的行为：

http://192.168.0.3:7379/zrangebyscore/used_phymem/1382268969/1382270409 1440 values
http://192.168.0.3:7379/zrangebyscore/used_phymem/1382270398/1382270410 12 values
http://192.168.0.3:7379/zrangebyscore/used_phymem/1382270398/1382270411 13 values
http://192.168.0.3:7379/zrangebyscore/used_phymem/1382270398/1382270412 14 values
http://192.168.0.3:7379/zrangebyscore/used_phymem/1382270398/1382270413 15 values
http://192.168.0.3:7379/zrangebyscore/used_phymem/1382270398/1382270414 16 values
http://192.168.0.3:7379/zrangebyscore/used_phymem/1382270408/1382270415 7 values

如您所见，有一个1440值的初始查询。但在此之后，在提到7个数据点的查询开始之前，有一些我不理解的查询。为什么立体主义查询12,13,14,15,16值，所有这些值都具有相同的开始时间？

结果如下（注意右边的间隙）： request

我无法弄清楚为什么会出现缺少数据的窗口......

这是我查询数据的功能：

function getData(metric) {
return context.metric(function(start, stop, step, callback) {
    var values = [];
    start = +start, stop = +stop;

    d3.json("http://192.168.0.3:7379/zrangebyscore/"+metric+"/"+(start/1000) +"/"+ (stop/1000), function(json_data) {
        entries = json_data.zrangebyscore;
        entries.forEach(function(e) {
            values.push(scale(e.split(":")[0]));
        });
        callback(null, values = values.slice(-context.size()));
    });      
}, name);
}

这是代码的其余部分：

var metrics = [ "used_phymem" ];

var context = cubism.context()
    .serverDelay(10 * 1000)
    .step(1 * 1000)
    .size(1440);

var scale = d3.scale.linear()
    .domain([0, 459505664])
    .range([10, 100]);

d3.select("#demo").selectAll(".axis")
    .data(["top", "bottom"])
    .enter().append("div")
    .attr("class", function(d) { return d + " axis"; })
    .each(function(d) { d3.select(this).call(context.axis().ticks(12).orient(d)); });

d3.select("body").append("div")
    .attr("class", "rule")
    .call(context.rule());

d3.select("body").selectAll(".horizon")
    .data(metrics.map(getData))
    .enter().insert("div", ".bottom")
    .attr("class", "horizon")
    .call(context.horizon()
    .extent([0, 100]));

context.on("focus", function(i) {
  d3.selectAll(".value").style("right", i == null ? null : context.size() - i + "px");
});

更新

我在jsbin上添加了一个使用随机数而不是我的json数据的例子：

http://jsbin.com/ABoLaya/1/

当页面加载时，图形中充满了值（如预期的那样），然后一秒钟没有任何反应。之后，图表每秒更新一次，但在初始数据之间，其余数据是间隙。

Answer 1

问题的原因似乎是服务器上的延迟/时钟偏差。如果您添加1秒的客户端延迟，一切正常（请参阅http://jsbin.com/iYuceku/1/edit）。

立体主义拥有数据源问题

1 个答案: