10

WebSocket (またはその他の非ポーリング データ ソース) と cubism.js の接続に関する具体的なチュートリアルはありますか?

特に、キュービズムのページの例と視覚的に似た、サーバーからのデータ ストリーミングのリアルタイム グラフを作成できるようにしたいと考えています。

参考文献: - https://github.com/square/cubism/issues/5 - http://xaranke.github.io/articles/cubism-intro/ - cubism.js の他のデータ ソースの使用

4

2 に答える 2

2

ここに私がいじっているものがあります。正式ではありませんが、うまくいくようです: https://gist.github.com/cuadue/6427101

websocket からデータが入ってきたら、バッファに入れます。コールバックをポンプし (以下で説明します)、バッファを引数として送信します。"success" または "wait for more data" の戻りコードを確認してください。成功は、データが cubism に送信されたことを意味し、このコールバックを削除できます。

cubism がデータのフレームをリクエストした場合、バッファ内の最後のポイントが cubism がリクエストした最後のポイントの後にあるかどうかを確認するコールバックを設定します。それ以外の場合は、さらにデータを待ちます。

要求されたフレームの停止をカバーするデータがある場合は、この要求を満たします。履歴をリクエストする API がなければ、過去のデータを削除する必要があります。

次に、バッファをキュービズムのステップ サイズに補間します。

cubism は同じ時点のデータを複数回要求しているように見えるので、バッファをどのようにプルーニングするかはあなた次第です。要求された開始時刻よりも前にすべてのデータを削除するだけでは安全ではないと思います。

于 2013-09-03T17:55:31.340 に答える
2

私は素早く汚いハックをしました：

  • Websocket は realTimeData 配列を埋めます
  • Cubism はいくつかの Web サービスから初期フェッチを行い、次に realTimeData 配列からプルします

    var firstTime = true;
    context.metric(function(start, stop, step, callback) {
      if (firstTime) {
        firstTime = false;
        d3.json("... {
          var historicalData = [];
          callback(null, historicalData);
        }
      } else {
        callback(null, realTimeData);
      }

cubism.js は、フェッチごとに 6 ポイント (cubism_metricOverlap) を想定しているため、realTimeData で 6 ポイントを保持するようにしてください。

于 2013-12-13T16:32:21.557 に答える