使用D3的实时数据 [英] Real-time data with D3

问题描述

我想知道如果我可以使用D3库与实时数据我的服务器将通过websockets发送。我看不到任何证明这一点的文档或示例。我最初的期望是通过下面的代码示例：

  ws = new WebSocket（ws：// localhost：8888 / ma）; 
一些更多的代码.... 
 
 ws.onmessage = function（evt）{
 d3.json（evt.data，function ）{
 ...... 
 .......更多代码..... 
 ...... 
} 
} 
  

但这似乎不起作用，但我知道客户端通过检查控制台接收数据日志。

此外，还有一个递归函数可以平滑一个JSON文档：

  //返回一个包含所有叶节点的扁平层次结构
 function classes（root）{
 var classes = []; 
 
 function recurse ，node）{
 if（node.children）node.children.forEach（function（child）{recurse（node.name，child）;}）; 
 else classes.push（{packageName：name ，className：node.name，value：node.size}）; 
} 
 
 recurse（null，root）; 
 return {children：classes} 
} 
 
 console.log（evt.data）; 
}; 
 
 ws.onclose = function（evt）{
 alert（Connection terminated）}; 
 
}） 
}）; 
  

如果我的JSON文档是平的，那么我认为它不需要ie：

  {ID：1，Name：'my name'，age：65，car：'Ford'} 
  
 
 
 
 D3对我来说是全新的，所以请大家帮助。
 
 
 
 
解决方案
我没有使用websockets与D3（尚未），但它看起来像你期待 d3.json 是一个JSON解析器。它不是 - 它是一个AJAX加载程序，委派 JSON.parse 用于解析。所以你可能想要像：
  var ws = new WebSocket（ws：// localhost：8888 / ma）; 
 
 var data = []; 
 
 ws.onmessage = function（evt）{
 //从套接字追加新数据
 data.push（JSON.parse（evt.data））; 
 update（）; 
}; 
 
 //现在使用标准的连接模式来处理更新
 function update（）{
 var chunk = d3.selectAll（'p'）
 .data （数据）; 
 
 //如果你总是追加
 
 
 
 chunk.enter（）。append（'p'）
 .text（function {return d;}）; 
 
} 
  
 
I was wondering if I could use the D3 library with real-time data my server would be sending via websockets. I can't see any documentation or examples that demonstrate this. My initial expectation was to do so by the following sample from code:
ws = new WebSocket(ws://localhost:8888/ma");   
some more code....

  ws.onmessage = function(evt) {
        d3.json("evt.data", function(json) {
......    
.......More code.....
......
 }
}
But this doesn't seem to work, but I know the client receives the data by checking the console log. 

Furthermore there is a recursive function which flattens out a JSON document:
// Returns a flattened hierarchy containing all leaf nodes under the root.
function classes(root) {
var classes = [];

function recurse(name, node) {
  if (node.children) node.children.forEach(function(child) { recurse(node.name, child);    });
  else classes.push({packageName: name, className: node.name, value: node.size});
  }

  recurse(null, root);
  return {children: classes};   
}

     console.log(evt.data);
  };

  ws.onclose = function (evt) {
       alert("Connection terminated")};

  });
 });
If my JSON doc is flat already then I presume it won't be required ie:
{ID: 1, Name: 'my name', age: 65, car: 'Ford'}
D3 is completely new to me so help would be appreciated.

Thanks
解决方案
I haven't used websockets with D3 (yet) but it looks like you're expecting d3.json to be a JSON parser. It's not - it's an AJAX loader that delegates to JSON.parse for parsing. So you probably want something like:
var ws = new WebSocket("ws://localhost:8888/ma");

var data = [];

ws.onmessage = function(evt) {
    // append new data from the socket
    data.push(JSON.parse(evt.data));
    update();
};

// now use the standard join pattern to deal with updates
function update() {
    var chunk = d3.selectAll('p')
        .data(data);

    // entry might be all you need, if you're always appending
    chunk.enter().append('p')
        .text(function(d) { return d; });

}


                        
这篇关于使用D3的实时数据的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！