使用 D3 的实时数据

Posted 2023-02-16

【中文标题】使用 D3 的实时数据

【英文标题】：Real-time data with D3

【发布时间】：2012-12-02 18:44:15

【问题描述】：

我想知道是否可以将 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 对我来说是全新的，因此我们将不胜感激。

谢谢

【问题讨论】：

您能重新格式化代码吗？第二个代码块对我来说毫无意义……

相关：***.com/questions/13591891/…

@filmor 该函数来自 D3 代码示例：github.com/mbostock/d3/blob/master/examples/bubble/bubble.js。如果原始 JSON 文档是嵌套的，我认为它用于“扁平化”JSON 结构。

@RossHamish，我也提出了这个问题。我希望这是一种更简单的询问方式，因为实时获取数据似乎是我的主要问题。

【参考方案1】：

我还没有在 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; );

【讨论】：

谢谢，我看看这个，明天早上试试。