立体派自己的数据源问题

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个数据点。我记录了立体派在我的代码中的行为方式：

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

UPDATE：

我添加了一个例子对使用的，而不是我的JSON数据的随机数jsbin：

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

页面加载时，图满值（预期），然后一秒钟没有任何反应。之后，图表每秒更新一次，但在初始数据之间更新，其余数据则有差距。

来源

2013-10-19 imbaer

您是否验证过您获取的数据是您期望的？ –

是的，数据库中没有相应的空白，查询_应该覆盖该数据。差距问题必须与我的同步/异步问题相关。 – imbaer

不确定你的意思是同步。当然，你所做的所有请求都是异步的？ –

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

来源

2013-10-23 21:10:06

立体派自己的数据源问题

回答

相关问题