立體派自己的數據源問題

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

立體派自己的數據源問題

回答

相關問題