我想知道我是否可以将D3库与我的服务器通过websockets发送的实时数据一起使用。我无法看到任何证明这一点的文档或示例。我最初的期望是通过以下代码示例:
ws = new WebSocket(ws://localhost:8888/ma");
some more code....
ws.onmessage = function(evt) {
d3.json("evt.data", function(json) {
......
.......More code.....
......
}
}
但这似乎不起作用,但我知道客户端通过检查控制台日志来接收数据。
此外,还有一个递归函数可以展平JSON文档:
// 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")};
});
});
如果我的JSON文档已经没有了,那么我认为它不会被要求,即:
{ID: 1, Name: 'my name', age: 65, car: 'Ford'}
D3对我来说是全新的,所以我们将不胜感激。
由于
答案 0 :(得分:6)
我还没有使用过带有D3的websockets,但看起来你期望d3.json
成为一个JSON解析器。它不是 - 它是一个AJAX加载器,它委托JSON.parse
进行解析。所以你可能想要这样的东西:
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; });
}