1

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

我最近发现了立体主义并被震撼了。所以我决定我的树莓派可以使用一些监控。我对 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 个数据点的查询开始之前。为什么 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/

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

4

1 回答 1

1

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

于 2013-10-23T21:10:06.433 回答