nvd3.jsを使用したリアルタイム折れ線グラフ

Question

nvd3.jsを使用してリアルタイムグラフを作成しようとしていますが、これは定期的に更新され、データがリアルタイムで処理されるという印象を与えます。

今のところ私は定期的にグラフを更新する関数を作成することができましたが、左に遷移する線のような "状態"間のスムーズな遷移はできません。

Here私はnvd3.jsを使用してやったことで、ここで興味深いのコードは次のとおりです。

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

今、私はd3.jsを使用して欲しいものを生成することができましたが、私のことができるようにすることを好むだろうnvd3.jsが提供するすべてのツールを使用してください。 Here私はd3.jsを使用して移行のnvd3

興味深いコードを使用して生成したいものですです：

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/

一般に、私は垂直遷移問題に対処する2つの方法を参照してください：

• 実際のポイントとポイント間の間隔が直線的に補間されてオーバーサンプリングされると、垂直方向の遷移がより「水平」になります（ただし、欠点は「偽」ポイントが多いことです）グラフの使用に応じて受け入れられない可能性があります）
• 最後に追加することでグラフを延長し、左側のチャートを翻訳して、残っている部分が削除されるまで表示されないようにします他のトリックをやっている）、それは最高です、上記の解決策はそれを行います