javascript - Cubism 自己的数据源问题

Question

TLDR:为什么在页面更新之前有一个暂停，导致图表中出现一个小的白色间隙？

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

我最近发现了立体主义并被震撼了。所以我决定我的树莓派可以使用一些监控。我对 javascript 和所有与网络相关的东西也是新手，所以请多多包涵。

我自己的数据源由一个 redis 数据库和 webdis 组成，我用它来获取 json 格式的数据。在 Redis 中，我每秒存储时间戳和值 (timestamp:value) 的组合，在我的示例中使用的物理内存。

所以当我这样查询 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 个数据点的查询开始之前，有一些我不明白的查询。为什么 Cubism 查询 12、13、14、15、16 个值，所有值都具有相同的开始时间？

结果如下所示(注意右边的空隙):

我不明白为什么会有那个丢失数据的窗口...

这是我查询数据的函数:

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