web-dev-qa-db-ja.com

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

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

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

ここ はnvd3.jsを使用して実行したもので、興味深いコードは次のとおりです。

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

これで、d3.jsを使用して必要なものを作成できましたが、nvd3.jsによって提供されるすべてのツールを使用できるようにしたいと思います。 ここ は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();

}
javascriptd3.jsreal-timetransitionnvd3.js
36
Christopher Chiche

あなたはおそらく見たいと思います： D3 Real-Time streamgraph（Graph Data Visualization） 、

特に答えのリンク： http://bost.ocks.org/mike/path/

一般に、垂直遷移の問題に対処する方法は2つあります。

  • 実際のポイント間にいくつかの線形補間があるオーバーサンプリング、およびポイント間の間隔が小さいほど、垂直方向の遷移がより「水平」に見えます（ただし、欠点は、多くの「誤った」ポイントを取得することです。チャートの使用）
  • 最後に追加してチャートを拡張し、左側のチャートを翻訳します。削除するまで（クリッピングするか、他のトリックを実行するまで）、まだ利用可能な左側の部分が表示されないことを確認します。それ
13
Alexandre Kaspar