與nvd3.js實時線圖

Question

我想創建一個實時圖，使用nvd3.js將定期更新，並有數據實時處理的印象。

現在我已經能夠創建一個函數來定期更新圖形，但是我無法像在向左轉換的線那樣在「狀態」之間進行平滑過渡。

Here是我使用的是什麼nvd3.js，這裏的有趣的代碼是：

d3.select('#chart svg') 
    .datum(data) 
    .transition().duration(duration) 
    .call(chart); 

現在，我已經能夠生產我想用d3.js什麼，但我更希望能夠使用nvd3.js提供的所有工具。 Here是我想生產什麼用nvd3

使用d3.js過渡有趣的代碼是：

function tick() { 

    // update the domains 
    now = new Date(); 
    x.domain([now - (n - 2) * duration, now - duration]); 
    y.domain([0, d3.max(data)]); 

    // push the accumulated count onto the back, and reset the count 
    data.push(Math.random()*10); 
    count = 0; 

    // redraw the line 
    svg.select(".line") 
     .attr("d", line) 
     .attr("transform", null); 

    // slide the x-axis left 
    axis.transition() 
     .duration(duration) 
     .ease("linear") 
     .call(x.axis); 

    // slide the line left 
    path.transition() 
     .duration(duration) 
     .ease("linear") 
     .attr("transform", "translate(" + x(now - (n - 1) * duration) + ")") 
     .each("end", tick); 

    // pop the old data point off the front 
    data.shift(); 

} 

Answer 1

你可能想看看： D3 Real-Time streamgraph (Graph Data Visualization)，

特別是鏈接的回答： http://bost.ocks.org/mike/path/

一般來說，我看到兩種方法來處理垂直轉換問題：

• 過採樣在實際點之間有一些線性插值，點之間的間隔越小，垂直轉換看起來就越「水平」（但缺點是會得到很多「假」點，這可能是不可接受的，取決於圖表的用途）
• 通過在最後添加來擴展圖表，並在左側翻譯圖表，確保仍然可用的左側部分不顯示，直到您將其刪除（剪切它或做任何其他技巧），這是最好的，並且上面提到的解決方案確實如此