是否有 cubism.js + WebSocket 的教程或示例？答案

【问题标题】：Are there any tutorials or examples for cubism.js + WebSocket?是否有 cubism.js + WebSocket 的教程或示例？
【发布时间】：2013-08-06 19:46:34
【问题描述】：

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

特别是，我希望能够创建来自服务器的数据流的实时图表，在视觉上类似于cubism page 上的示例。

参考资料： - https://github.com/square/cubism/issues/5 - http://xaranke.github.io/articles/cubism-intro/ - Using Other Data Sources for cubism.js

【问题讨论】：

我很想知道解决方案

标签： javascript d3.js websocket data-visualization cubism.js

【解决方案1】：

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

当数据从 websocket 进来时，把它放在一个缓冲区中。泵送回调（我将在下面解释），将缓冲区作为参数发送。检查“成功”或“等待更多数据”的返回码。成功意味着数据已发送到 cubism，我们可以删除此回调。

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

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

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

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

【讨论】：

【解决方案2】：

我做了一个快速而肮脏的 hack：

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 个点

【讨论】：

我想知道 6 个数据点的事情。为什么立体派需要6个数据点才能绘制？