有关于cubism.js+WebSocket的教程或例子吗

Question

有没有专门关于连接WebSockets（或其他非轮询数据源）和cubism.js的教程？

特别是，我希望能够创建一个来自服务器的实时数据流图，在视觉上类似于立体主义页面上的示例。

参考文献：-https://github.com/square/cubism/issues/5-http://xaranke.github.io/articles/cubism-intro/-使用cubism.js 的其他数据源

Answer 1

这是我在玩的东西。它并不权威，但似乎有效：https://gist.github.com/cuadue/6427101

当数据从websocket进入时，将其放入缓冲区。泵送回调（我将在下面解释），将缓冲区作为参数发送。检查返回代码中的"成功"或"等待更多数据"。成功意味着数据已发送到立体主义，我们可以删除此回调。

当立体主义请求一帧数据时，设置一个回调，检查缓冲区中的最后一点是否在请求的最后一个立体主义点之后。否则，请等待更多数据。

如果有数据覆盖了请求帧的停止，我们将满足此请求。如果没有API来请求历史记录，我们必须将数据丢弃到过去。

然后，只需将缓冲区插值到立体主义步长上。

看起来立体主义多次从同一时间点请求数据，所以如何修剪缓冲区取决于您。我认为在请求的开始时间之前删除所有数据是不安全的。

Answer 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);
      }

请注意，cubsm.js每次提取需要6个点（cubsm_metricOverlap），因此请确保在realTimeData 中保留6个点